使两个响应图像具有相同的高度

本文介绍了使两个响应图像具有相同的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在将图像width:100%(或50%)用于img，这会自动计算高度.有时候可以，但是我不可以.

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="moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png" style="width: 50%" class="img-responsive"> <img src="moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png" style="width: 50%" class="img-responsive"> </div>

由于两个图像都具有不同的高度，因此生成的图像也具有不同的高度.我不希望这样.如何使两个图像具有相同的高度?请记住，当屏幕尺寸改变时，图像应该具有响应性，因此，我想我不能简单地同时添加两个图像的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.

我也无法更改原始图像的高度.如果可能，我需要使用CSS进行制作-然后使用jquery.

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

推荐答案

您可以这样做

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="ajax.googleapis/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-7 horizontal-list-media"> <div class="image-container"> <img src="moneyti.co/wp-content/uploads/2016/01/16-Zingis-RUS.png" style="" class="img-responsive"> </div> <div class="image-container"> <img src="moneyti.co/wp-content/uploads/2016/01/16-kazino-RUS-360x240.png" class="img-responsive"> </div> </div>