javascript - 如何使两个图像等高并保持调整大小

Question

我正在尝试制作两个放置在两个 float div 中的高度相等的图像。两张图片都占了页面宽度的 100%，但它们的比例是 60/40%，我想在调整大小时保持这样。再次: 2张图片，不同的高度，想让它的高度相同，我不关心宽度(我会隐藏它)，并且比例在调整大小时保持不变。

Answer 1

在 CSS 中将图像声明为背景图像，并赋予它们 cover 的大小。在下面的示例中，我使用了 background: shorthand .

请参阅 this fiddle 中的示例.

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