logo标签列表

使两张响应式图片高度相同

htmlcssimagetwitter-bootstrap
5

我正在使用图片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。

似乎是这个链接的重复内容：https://dev59.com/54fca4cB1Zd3GeqPfzim - Insomniac
4个回答
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%;
  }
}
1
你可以这样做。 

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>

0

你可以这样做

<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>
0
你差不多说对了。我稍微修改了一下你的代码。你需要设置父级 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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接