html - CSS:为给定高度保持元素的纵横比

Question

上面指向可能重复项的链接不是这种情况的解决方案，因为对于多个断点，高度将是固定值。

我有一些带有 display:inline-block 的 DIV，因此它们可以很好地并排 float 。这些 DIV 都具有相同的高度，例如高度:300 像素。稍后，我将使用 Ajax 在每个 DIV 中加载一个图像，我希望 DIV 保持图像的纵横比，这样当实际加载图像时它们就不会四处摆动。

因此，当 DIV 显示在浏览器中时，图像还不存在，因此使用 height:auto; 固定图像的高度是行不通的。

示例代码:

<div class="wrapper">
    <div class="item">...</div>
    <div class="item">...</div>
    <!-- More items here -->
</div>

CSS:

.item {
    display:inline-block;
    vertical-align:top;
    height: 300px;
    width: /* depending on the image ratio */
}

现在我知道如何保持给定宽度的元素的纵横比(参见 here 或 here )。但是由于我的 DIV 应该都具有相同的高度，我如何才能保持纵横比并只改变宽度呢？

一个(不太好)的解决方案是插入空白图像并将该图像调整为正确的尺寸。

问题是:调整窗口大小时，所有DIV的高度都会改变，所以只计算宽度是不够的。我可以使用 Javascript 重新计算宽度，但我更喜欢纯 CSS 版本(如果可能)。

所以这是我的问题:如何仅通过 CSS 保持给定高度的元素的纵横比？

谢谢

Answer 1

您有宽高比但没有实际图像尺寸。我认为您可以使用 calc为此功能。 浏览器支持是个问题:

/* Note: using 30px height for demonstration */
 .item {
    display: inline-block;
    vertical-align: top;
    height: 30px;
    background: #FC0;
}
.ratio-3-2 .item {
    /* 3:2 = 1.5 */
    width: calc(30px * 1.5);
}
.ratio-4-3 .item {
    /* 4:3 = 1.3333 */
    width: calc(30px * 1.3333);
}

<div class="wrapper ratio-3-2">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
<div class="wrapper ratio-4-3">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

在上面的演示中，第一组 div 的宽度为 45px，第二组的宽度为 40px。