title: Responsive Image with fixed height
body: <p>i would like to have responsive image with a fixed height.</p>
  
  <p>Here is my html : </p>
  
  <pre><code>&lt;div class="col-md-6"&gt;
     &lt;div class="img"&gt;
         &lt;img src="http://image.noelshack.com/fichiers/2016/16/1461065658-b-v-s.jpg"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-6"&gt;
     &lt;div class="img"&gt;
         &lt;img src="http://image.noelshack.com/fichiers/2016/16/1461065665-kfp3.jpg"&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my css :</p>
  
  <pre><code>.col-md-6 {
     width: 50%;
     float: left;
   }
  
  .img {
     overflow: hidden;
     position: relative;
     height: 290px;
  }
  
  .img img {
     max-width: 100%;
     min-width: 100%;
     min-height: 100%;
  }
  </code></pre>
  
  <p>Here is my jsfiddle : <a href="https://jsfiddle.net/23o81xrb/" rel="noreferrer">https://jsfiddle.net/23o81xrb/</a></p>
  
  <p>As u can see, .img has an height of 290px and that should stay like that, but when we reduce the window, images aren't adapted. I would like to have like a "zoom" on my image so they can keep 290px height and be adapted in width.</p>
  
  <p>Sorry for my "bad" english, hope u understood.</p>
  
  <p>Any help will be appreciated, thanks.</p>