Html 如何使图像响应高度？

我有这个样本：

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

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

.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;

}

问题是如果你调整窗口的大小。。。第一个图像比另外两个高。 我怎样才能始终保持所有3张图片的高度相同？但图片的高度和宽度都要有响应

---

提前谢谢

所以我建议为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使用背景图像

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

---

要保持高度，你可以做的一件事是将图像设置为流动的，但要保持其纵横比；关于如何做到这一点，有一些教程，例如

---

缺点是，如果图像的纵横比不是16:9，图像将被裁剪。将每个图像放在一个div类中，并在css中设置最大高度：“…px”将宽度设置为“自动”

如何

。img responsive{width:auto；height:355px；}

您无法使图像响应（等高或等宽）在图像标记内同时使用高度和宽度。您必须选择1个属性，宽度或高度。另一种选择是使用@Dhavalyes提供的答案，但我不想使用背景图像，否则无法使用？如果您想使用img，那么您应该对所有图像使用相同的大小比例。

.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;

}