javascript - 为所有图像设置相同的高度

Question

我有三张图片，我正在一张一张地展示它们，它们有不同的高度，并且根据图片高度推拉其他内容。当我为图像设置固定高度时，高度将不再响应。如何为响应式仍然有效的这些图像设置相同的高度？

这是我的脚本:

var i = 0; var path = new Array();

path[0] = "/pic/Company.png";
path[1] = "/pic/S031.png";
path[2] = "/pic/AnnualReport2015_f.png";

function swapImage() {
    document.slide.src = path[i];
    if (i < path.length - 1) i++;
    else i = 0;
    setTimeout("swapImage()", 3000);
}

CSS 但它没有解决我的问题:

#left-img
    {
       max-height: 500px;
    }

HTML:

<div class="col-md-8">
   <img name="slide" src="home1.jpg" class="img-responsive" id="left-img"/>
</div>

Answer 1

使用它们的 class 而不是它们的 id，顺便说一句，id 对于每个图像都应该是唯一的

使用 max-height: 300px 时，只有更大的尺寸会缩小到 300px，使用 height: 300px 会做同样的事情，但也会变小(并且所有尺寸都会保持它们的纵横比)。

.img-responsive
{
  height: 300px;
}

<div class="col-md-8">
  <img name="slide" src="http://placehold.it/150x200" class="img-responsive" id="left-img-1"/>
  <img name="slide" src="http://placehold.it/150x300" class="img-responsive" id="left-img-2"/>
  <img name="slide" src="http://placehold.it/150x400" class="img-responsive" id="left-img-3"/>
  <img name="slide" src="http://placehold.it/150x500" class="img-responsive" id="left-img-4"/>
</div>