Responsive Image with fixed height
<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>