Responsive Image with fixed height

Question

i would like to have responsive image with a fixed height.

Here is my html :

<div class="col-md-6">
   <div class="img">
       <img src="http://image.noelshack.com/fichiers/2016/16/1461065658-b-v-s.jpg">
   </div>
</div>
<div class="col-md-6">
   <div class="img">
       <img src="http://image.noelshack.com/fichiers/2016/16/1461065665-kfp3.jpg">
   </div>
</div>

Here is my css :

.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%;
}

Here is my jsfiddle : https://jsfiddle.net/23o81xrb/

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.

Sorry for my "bad" english, hope u understood.

Any help will be appreciated, thanks.

Answer 1

If you use img tag, use can use object-fit property in CSS3 as below :

.col-md-6 {
  width: 50%;
  float: left;
}

.img {
  overflow: hidden;
  position: relative;
  height: 290px;
}

.img img {
  max-width: 100%;
  min-height: 100%;
  object-fit: cover;
}

That should solve your problem.