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

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

4 个答案: