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

Question

我正在为 img 使用图像 width:100%(或 50%)，这会自动计算高度。有时这没问题，但对我来说不是。

我需要以相同的高度在一行中显示两张图片，但原始图片的高度不同(因此结果两张图片的高度也不同)。

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

由于两幅图像的高度不同，因此生成的图像也具有不同的高度。我不希望这样。如何使两个图像的高度相同？请记住，当屏幕尺寸发生变化时图像应该响应，因此我想我不能简单地添加两个图像的高度属性。

我也无法更改原始图像的高度。我需要用 css 实现它，如果不可能 - 然后用 jquery。

Answer 1

基本上，您正在寻找一种方法来使图像保持相同的纵横比(高度与宽度的关系始终相同)。为此，有一个整洁的小 CSS hack使用伪元素和 padding-top。参见 DEMO例如。

标记:

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