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

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

1 个答案: