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

Question

I have three images and I am displaying them one by one, they have different height and that push and pull other content based on image height. When I set fixed height for image, the height will not be responsive anymore. How to set same height for these images where responsive can still work?

This is my Script:

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 but it does not solve my problem :

#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

Use their class instead of their id , and btw, id should be unique for every image

With max-height: 300px , only bigger gets resized down to 300px, using height: 300px will do the same but also up size smaller (and all will keep their aspect ratio).

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