Bootstrap：等高图像的响应行，宽度基于图像长宽比

Question

我觉得我已经阅读了大约20篇左右的类似文章，但是似乎都没有我想要的东西。

问题：

我有一排图像（例如说3张）。 每个图像具有不同的纵横比。 我想连续显示所有图像，以使它们的高度相等。 包含图像的列的宽度是可变的。 我自己并没有固定高度，也不想随意限制图像的高度。 图像（及其填充）完全填满了水平空间； 这决定了高度（因为保持了宽高比）。 当窗口缩小（移动大小）时，我希望所有图像都像引导程序的响应式布局一样放在另一个图像的下面。

我已经尝试了很多东西。 我非常确定我不能使用bootstrap列类（例如col-md-4），因为它们会更改其内容的大小以保持固定的宽度。 据我所知，bootstrap并没有提供一个干净的解决方案。 我还尝试了表响应式，这似乎无济于事。 非常感谢您的帮助。

Answer 1

这是一个解决方案：

 td img { height: 12vw; width: auto; margin: 4px; } div { border: 1px solid gray; } table { width: auto; margin: 0 auto; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <table> <tr> <td> <img src="//placehold.it/200x150/2255EE"> </td> <td> <img src="http://placekitten.com/300/450"> </td> <td> <img src="http://placekitten.com/450/300"> </td> </tr> </table> <table> <tr> <td> <img src="http://placehold.it/200x400"> </td> <td> <img src="http://placehold.it/400x200"> </td> <td> <img src="http://placehold.it/300x300"> </td> </tr> </table> </div> </div> 

Answer 2

尝试这个 。 无论您添加到这三个div的图像如何，它们的高度始终相等，而不会剪切图像。

重复执行45次循环以清楚地显示最终结果，您也可以通过将代码中的宽度变化从0.5％增加到1％来将其重复执行15次。 （for循环的最后一行）。

您也可以将宽度更改为2％，并使循环只走四个边缘，然后从图像中裁剪出多余的高度（不会超过15到20像素左右），而必须重复4次45。

 $(document).ready(function(){ var width = [33.33,33.33,33.33]; for(var j=0;j<45;j++){ var height1 = $(".imagecol").eq(0).css("height"); var height3 = $(".imagecol").eq(1).css("height"); var height3 = $(".imagecol").eq(2).css("height"); var maxH=height1; var maxHi=0; var minH=height1; var minHi=0; for(var i=1;i<3;i++){ if($(".imagecol").eq(i).css("height")>maxH){ maxH = $(".imagecol").eq(i).css("height"); maxHi=i; } if($(".imagecol").eq(i).css("height")<minH){ minH = $(".imagecol").eq(i).css("height"); minHi=i; } } width[maxHi] = width[maxHi]-0.25; width[minHi] = width[minHi]+0.25; $(".imagecol").eq(maxHi).css("width",(width[maxHi]+"%")) $(".imagecol").eq(minHi).css("width",(width[minHi]+"%")) } for(var i=0;i<3;i++){ $(".imagecol").eq(i).css("height",minH); } }); 

 *{ box-sizing:border-box; } .imagecol{ width:33.33%; margin:0; padding:0; float:left; } .imagerow{ width:100%; margin:0; padding:0; } .displayIm{ width:100%; margin:0; padding:5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="imagerow"> <div class="imagecol"> <img class="displayIm" src="https://media.zigcdn.com/media/content/2016/Feb/bike-of-the-year-pulsar-rs200-m_720x540.jpg" /> </div> <div class="imagecol"> <img class="displayIm" src="https://static.pexels.com/photos/50704/car-race-ferrari-racing-car-pirelli-50704.jpeg" /> </div> <div class="imagecol"> <img class="displayIm" src="http://www.iwallfinder.com/files/81/the-second-series-of-the-vertical-screen-flower-photo-40456.jpg" /> </div> </div>