使两个响应图像具有相同的高度 [英] making two responsive images the same height

问题描述

我正在将图像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="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>

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

这篇关于使两个响应图像具有相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！