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

Question

I feel like I've read through about 20 or so similar posts, but none seem to have the exact thing I'm looking for.

The problem:

I have a row of images (say 3 for example). Each image has a different aspect ratio. I want to display all images in a row such that their heights are equal. The width of the column containing the images is fluid. I'm not fixing the height myself and I don't want to arbitrarily limit the height of the images. The images (and their padding) fill the horizontal space completely; this determines the height (because the aspect ratio is maintained). When the window shrinks (to mobile sizes) I want all the images to be placed one below the other like bootstrap's responsive layout usually does.

I've tried many things. I'm pretty sure that I can't use the bootstrap column classes (like col-md-4) because they change the size of their content to maintain a fixed width. As far as I can tell, bootstrap doesn't offer a clean solution to this. I've also tried table-responsive, which doesn't seem to help. Help is very much appreciated.

Answer 1

Here is a solution:

 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

Try this . whatever image you add to these three div they will always be equal in height without cutting the image.

Irepeated the loop 45 times to show end result clearly you can do this only 15 times too by increasing width-change from 0.5% to 1% in the code. (last line of for loop).

also you can make the width-change to 2% and make loop go only four rimes and then crop the extra height from the images (it won't be more then 15 to 20px or so) and you have to repeat it 4 times instead of 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>