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

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

你可以这样做

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