如何使两个图像的高度相等并保持其大小

Question

我试图使放置在两个浮动div中的两个图像相等的高度。 这两张图像都占用页面宽度的100％，但是它们的比例是60/40％，我希望在调整大小时保持不变。 再说一遍：2张图像，不同的高度，想要使其高度相同，我不在乎宽度（我将其隐藏），并且在调整大小时比率保持不变。

Answer 1

将CSS中的图像声明为背景图像，并为其设置一个cover大小。 在下面的示例中，我使用了background: shorthand 。

请参阅此小提琴中的示例。

.container {
    width: 100%;
    height: 200px;
    background-color: #eee;
}

.foo, .bar { height: 100%; float: left; }

.foo {
     width: 60%;
     background: url("http://url.com/image.png") no-repeat center top / cover;
} 

.bar { 
    width: 40%;
    background: url("http://url.com/image.png") no-repeat center top / cover;
}