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

Question

我将图像width:100%（或50%）用于img，这会自动计算高度。有时这没关系，但在我的情况下不是。

我需要在一行中显示两个相同高度的图像，但原始图像的高度不同（因此结果两个图像的高度也不同）。

<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 使用伪元素和填充顶部。例如，请参阅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%;
  }
}

Answer 2

你可以这样做

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

你可以这样做

<div class="col-md-7">
    <div class="col-sm-6 bx-img img1"></div>
    <div class="col-sm-6 bx-img img1"></div>
</div>

风格是

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

或者这样

<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

你几乎是对的。我稍微修改了你的代码。您必须设置父 div 的高度。还要使用适当的浮动进行定位。

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

工作示例 http://www.bootply.com/rZirK5Z49w