html - 如何使图像响应高度？

Question

我有这个样本:

link

代码 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>  

代码 CSS:

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

问题是，如果您调整窗口大小……第一张图片比其他两张高。我怎样才能始终使所有 3 张图片保持相同的高度？但图片要同时响应高度和宽度。

提前致谢!

Answer 1

要保持高度，您可以做的一件事是将图像设置为流畅的，但保持它们的纵横比；有几个关于如何做到这一点的教程，例如http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/或 https://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

缺点是如果宽高比不是 16:9，图像将被裁剪