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>
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.
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%;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With