CODEWITHSUNDEEP
htmlcss
Thomas Gueguen
Thomas Gueguen

Reputation: 101

Responsive Image with fixed height

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.

Upvotes: 7

Views: 15397

Answers (2)

Biraj Bora
Biraj Bora

Reputation: 949

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.

Upvotes: 3

Emirhan
Emirhan

Reputation: 132

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-b-v-s.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>

Upvotes: 2

Related Questions