title: Set same height for all images
body: <p>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?</p>
  
  <p>This is my Script:</p>
  
  <pre><code>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 &lt; path.length - 1) i++;
      else i = 0;
      setTimeout("swapImage()", 3000);
  }
  </code></pre>
  
  <p>CSS but it does not solve my problem :</p>
  
  <pre><code>#left-img
      {
         max-height: 500px;
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="col-md-8"&gt;
     &lt;img name="slide" src="home1.jpg" class="img-responsive" id="left-img"/&gt;
  &lt;/div&gt;
  </code></pre>