ブートストラップv4で同じ高さの画像

Question

高さは同じですが幅が異なる画像があります。 同じ高さの行にそれらを表示し、それを反応させる方法。

たとえば、各画像が同じ高さになるように3つの画像を1つの行に表示したいとします。

<div class="row"> 
    <div class="float-left"> 
    <img src="img1.png" class="??"> 
    </div> 
    <div class="float-left"> 
    <img src="img2.png" class="??"> 
    </div> 
    <div class="float-left"> 
    <img src="img3.png" class="??"> 
    </div> 
</div> 

Answer 1

あなたは画像の高さを知っていれば、あなたがこのような何かを行うことによってCSSを使用してそれを強制することができますに：

.float-left img { 
    height:(value)px; 
    width:auto; 
} 

Answer 2

は<img src="img.png" height="3" width="3">

Answer 3

セミを書き、その後、高さと幅など3を選びます応答性の高いソリューションです。

メディアクエリを使用して、各画面サイズごとに異なる高さを設定します。

これは完全に反応せず、画像はコンテナの全幅をとらない。しかし、各画像は同じ高さ - 各画面サイズの固定高さです。

HTML（HAML）：

.row.my-list 
    .card.d-flex.align-items-stretch.align-self-center 
    %img.card-img-top{:src => "img1.png"}/ 
    .card.d-flex.align-items-stretch.align-self-center 
    %img.card-img-top{:src => "img2.png"}/ 
    .card.d-flex.align-items-stretch.align-self-center 
    %img.card-img-top{:src => "img3.png"}/ 

CSS（SASS）：

.my-list{ 
    .card{ 
    border: 0; 
    } 

    img{ 
    @include media-breakpoint-down(sm) { 
     height: 40px; 
    } 

    @include media-breakpoint-up(md) { 
     height: 100px; 
    } 

    } 

}