ブートストラップ：画像のアスペクト比に応じた高さの等しい画像（画像のアスペクト比に基づく幅）

Question

私は約20ほどの類似記事を読んだようですが、私が探している正確なものはありません。

問題：

私は1行の画像を持っています（たとえば3つ）。各画像のアスペクト比が異なります。私はすべての画像を高さが等しいように一列に表示したいと思います。画像を含む列の幅は流体です。私は身長を自分で固定しているわけではなく、画像の高さを任意に制限したくない。イメージ（およびそのパディング）は水平空間を完全に埋めます。これは高さを決定する（アスペクト比が維持されるため）。ウィンドウが（モバイルサイズに）縮小するとき、私はブートストラップの反応的なレイアウトのように、通常はすべての画像を上下に配置したい。

私は多くのことを試しました。私は、固定幅を維持するためにコンテンツのサイズを変更するため、（col-md-4のような）ブートストラップカラムクラスを使用できないと確信しています。私が知る限り、ブートストラップはこれに対してクリーンなソリューションを提供しません。私もテーブルレスポンスを試みましたが、これは役に立たないようです。ヘルプは非常に感謝しています。ここで

Answer 1

は、ソリューションです：

td img { 
 
    height: 12vw; 
 
    width: auto; 
 
    margin: 4px; 
 
} 
 
div { 
 
    border: 1px solid gray; 
 
} 
 
table { 
 
\t 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

はこれを試してみてください。これら3つのdivに追加する画像は、画像を切り取らずに常に同じ高さになります。

ループを45回回して最終結果を表示すると、コード内の0.5％から1％への幅の変更を増やして、これを15回だけ行うことができます。 （forループの最後の行）。

また、幅の変更を2％にしてループを4回だけ動かし、余分な高さを画像から切り取ることができます（それ以上のサイズは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>