title: CSS: Responsive images in a row cut to same height according to the smallest image
body: <p>I have 2 images in a row, which are of different height. The structure is build using Bootstrap grid. </p>
  
  <p>I want the images to be responsive according to the width of viewport, but at the same time they has to be of <strong>equal height at every moment</strong>. (otherwise the texts below are scattered)</p>
  
  <p>HTML:</p>
  
  <pre><code>   &lt;div class="item container active"&gt;
           &lt;h1&gt;Lorem IPSUM&lt;/h1&gt;
  
          &lt;div class="row items-holder"&gt;
              &lt;div class="col-xs-6"&gt;
                  &lt;img /&gt;
                  &lt;p class="title"&gt;SOME TITLE&lt;/p&gt;
                  &lt;p class="subtitle"&gt;Subtitle&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="col-xs-6"&gt;
                  &lt;img/&gt;
                  &lt;p class="title"&gt;SOME TITLE&lt;/p&gt;
                  &lt;p class="subtitle"&gt;Subtitle&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.items-holder img {    
      width: 100%;    
      height: auto;    
      max-height: 450px;    
      overflow: hidden;    
      display: block;    
  }
  </code></pre>
  
  <p>The fiddle: <a href="http://jsfiddle.net/64CLd/" rel="nofollow noreferrer">http://jsfiddle.net/64CLd/</a></p>
  
  <p>Similar problem is mentioned <a href="https://stackoverflow.com/questions/22324072/bootstrap-responsive-image-height">here</a>, but the solution doesn't work for me.</p>