Making two sensitive images of the same height

Question

I use image width:100% (or 50% ) for img , this automatically calculates the height. Sometimes this is normal, but not in my case.

I need to display two images in a row with the same height, but the source images have different heights (so as a result, the two images also have different heights).

 <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> 

Since both images have different heights, the resulting images also have different heights. I do not want it. How to make both images the same height? Keep in mind that images should react when the screen size changes, so I can't just add the height property of both images, I think.

I also cannot change the height of the original images. I need to do this with css if this is not possible - then with jquery.

Answer 1

Basically, you are looking for a way to save images in one aspect (the height is always the same with respect to the width). To do this, there is a neat little CSS hack using a pseudo-element and padding-top. For example, DEMO .

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

Answer 2

you can do it like that

 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> 

Answer 3

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

 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 in 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> 

Answer 4

You were almost right. I changed your code a bit. You must set the height of the parent div. Also use proper swimming 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