すべての画像に同じ高さに設定

Question

私は3つの画像を持っていて、1つずつ表示しています。それぞれの高さが異なり、画像の高さに基づいて他のコンテンツをプッシュします。イメージの固定高さを設定すると、高さはそれ以上応答しなくなります。どのように応答性がまだ動作することができますこれらの画像の同じ高さを設定するには？

これは私のスクリプトです：

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では、height: 300pxを使用すると、サイズが大きくてもサイズが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>