イメージの高さをどのようにする？

CODEのHTML：

<div class="row"> 
    <div class="col-md-4"> 
     <img src="http://rochester.motorcitynewengland.com/img/cars/kia-forte.jpg" alt="2015 Kia Forte" title="2015 Kia Forte" class="img-responsive"> 
    </div> 

    <div class="col-md-4"> 
     <img src="http://rochester.motorcitynewengland.com/img/cars/chrysler-300C-min.jpg" alt="2015 Kia Forte" title="2015 Kia Forte" class="img-responsive"> 
    </div> 


    <div class="col-md-4"> 
     <img src="http://rochester.motorcitynewengland.com/img/cars/dodge-dart-min.jpg" alt="2015 Kia Forte" title="2015 Kia Forte" class="img-responsive"> 
    </div> 
</div>

CODEのCSS：

img{ 
    max-height: 355px; 
    margin-bottom: 0.5em; 
    text-align:center; 
}

問題は、ウィンドウのサイズを変更するとということです。 ..最初の画像はthよりも背が高い他の2つ。どのようにして3つの写真すべてに常に同じ高さを保つことができますか？画像は高さと幅の両方で反応します。

ありがとうございます！

出典

2016-11-23 John Smithe

「.img-responsive { width：auto; 身長：355px; } ' – claudios

イメージタグ内で高さと幅の両方を使用して画像を反応させることはできません（高さが等しいか等しい）。 1つのプロパティ（幅または高さ）を選択する必要があります。もう一つの選択肢は@Dhaval – Aslam

だから私は3 divの3 cssクラスを作ることを提案します。

<div class="col-md-4 xyz1></div> 
<div class="col-md-4 xyz2"></div> 
<div class="col-md-4 xyz3"></div>

あなたは画像のdivの背景を設定することができます。

.xyz1{ 
background : url(yourUrl); 
background-size: contain; 
background-repeat: no-repeat; 
}

など..

出典

2016-11-23 07:19:01

あなたはそれぞれの代わりに

<div class="row"> 
    <div class="col-md-4 img1 img"> 
    </div> 

    <div class="col-md-4 img2 img"> 
    </div> 

    <div class="col-md-4 img3 img"> 
    </div> 

</div>

をDIV CSSの背景画像を使用することができます。

.img1{ 
    background:url(http://rochester.motorcitynewengland.com/img/cars/kia-forte.jpg); 

} 
.img2{ 
    background:url(http://rochester.motorcitynewengland.com/img/cars/chrysler-300C-min.jpg); 

} 
.img3{ 
    background:url(http://rochester.motorcitynewengland.com/img/cars/dodge-dart-min.jpg); 

} 

.img{ 
    height: 355px; 
    background-size:cover; 
    background-position:center; 

}

working demo

出典

2016-11-23 07:27:13 Chiller

で提供されている答えを使用することですが、私はバックグラウンドイメージを使用したくないのですが、そうでなければ使用できませんか？ –

imgを使用する場合は、すべての画像に同じサイズの割合を使用する必要があります。 – Chiller

高さを保つためにできることの1つは、画像を流体として設定することですが、アスペクト比を維持することです。それを行う方法についていくつかのチュートリアルがあります。 divのクラスで各画像を入れて、CSSでの最大の高さを作る

出典

2016-11-23 08:56:09

9：http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/またはhttps://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

短所は、そのアスペクト比が16でない場合、画像がトリミングされますということです」... px "は自動幅に設定します

出典

2016-11-23 09:34:17