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 want to create zoom effect with fixed height in img tags, good luck !

But, If you use your images as background, you may fix to height and you may get a solution like you want. Here is an example:

 .col-md-6 { width: 50%; float: left; } .img { overflow: hidden; position: relative; height: 290px; } .img.first { background-image: url('http://image.noelshack.com/fichiers/2016/16/1461065658-bvs.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; } .img.second { background-image: url('http://image.noelshack.com/fichiers/2016/16/1461065665-kfp3.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover; } .img img { max-width: 100%; min-width; 100%; min-height: 100%; } 

 <div class="col-md-6"> <div class="img first"> </div> </div> <div class="col-md-6"> <div class="img second"> </div> </div> 

Answer 2

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.