CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap
renathy
renathy

Reputation: 5345

making two responsive images the same height

I am using image width:100% (or 50%) for img, this calculates height automatically. This is ok sometimes, but not in my case.

I need to display two images in a line with the same height, but original images has different height (so in the result two images also have different height). 

<div class="col-md-7 horizontal-list-media">
    <img src="http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png" style="width: 50%" class="img-responsive">
    <img src="http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png" style="width: 50%" class="img-responsive">
</div>

two responsive images have different height

As both images have different height, then the resulted images also has different height. I do not wish this. How to make both images the same height? Take in mind that images should be responsive when screen size changes, thus I cannot simply add height property of both images, I guess.

I also cannot change height of original images. I need to make it with css, if not possible - then with jquery.

Upvotes: 5

Views: 2185

Answers (4)

manukn
manukn

Reputation: 2888

you can do it like this

var height = $('.image-container').height();
var width = $('.image-container').width();
if (height > width) {
  $('.image-container img').css({
    width: "auto",
    height: "100%"

  });
} else {
  $('.image-container img').css({
    width: "100%",
    height: "auto"

  });

}
.horizontal-list-media {
  overflow: hidden;
}
.image-container {
  overflow: hidden;
  width: 50%;
   /*define your height here*/
  height: 100px; 
}
.image-container img {
  top: 50%;
  left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 horizontal-list-media">
  <div class="image-container">
    <img src="http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png" style="" class="img-responsive">
  </div>
  <div class="image-container">
    <img src="http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png" class="img-responsive">
  </div>
</div>

Upvotes: 1

mirmdasif
mirmdasif

Reputation: 6354

You were almost right. I have modified your code a bit. You have to set height of the parent div. Also use proper floating for positioning.

<div class="col-md-7 horizontal-list-media" style="height: 200px">
  <img src="http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png" style="width: 50%;height: 100%; float : left" class="img-responsive">
    <img src="http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png" style="width: 50%;height: 100%; float : right" class="img-responsive">
</div>

Working example http://www.bootply.com/rZirK5Z49w

Upvotes: 0

Teo Dragovic
Teo Dragovic

Reputation: 3518

Basically, you are looking for a way to keep your images in same aspect ration (height is always the same in relation to width). For this, there is a neat little CSS hack using pseudo-element and padding-top. See DEMO for example.

markup:

<div class="col-md-7 horizontal-list-media">
    <div class="img-responsive">
        <img src="http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png">
    </div>
    <div class="img-responsive">
        <img src="http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png">
    </div>
</div>

css:

.img-responsive {
  width: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.img-responsive:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%; // this makes aspect ratio 16:9, adjust at will
}
.img-responsive img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
@media (min-width: 640px) {
  .img-responsive {
    width: 50%;
  }
}

Upvotes: 1

Shayan
Shayan

Reputation: 966

you can do it this way

<div class="col-md-7">
    <div class="col-sm-6 bx-img img1"></div>
    <div class="col-sm-6 bx-img img1"></div>
</div>

and style is

div.bx-img{
    height: 200px;
    background-size: cover;
}
.img1{
    background: url("http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png") no-repeat scroll 0 0;
}
.img2{
    background: url("http://moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png") no-repeat scroll 0 0;
}

or this way

<div class="col-md-7">
    <div class="col-md-6 col-sm-6 col-xs-12" style="height:200px;background:rgba(0, 0, 0, 0) url('http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png') no-repeat scroll 0 0 / cover "></div>
    <div class="col-md-6 col-sm-6 col-xs-12" style="height:200px;background:rgba(0, 0, 0, 0) url('http://moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png') no-repeat scroll 0 0 / cover "></div>
</div>

Upvotes: 0

Related Questions