CSS：保持给定高度的元素的纵横比

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

我有一些 DIVdisplay:inline-block，所以它们并排漂浮得很好。这些 DIV 都具有相同的高度，例如height:300px。稍后，我将使用 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 */
}

现在我知道如何保持给定宽度的元素的纵横比 (see here http://www.mademyday.de/css-height-equals-width-with-pure-css.html or here http://wellcaffeinated.net/articles/2012/12/10/very-simple-css-only-proportional-resizing-of-elements/）。但是由于我的 DIV 应该具有相同的高度，我如何保持纵横比并仅更改宽度？

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

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

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

Thanks

您有纵横比，但没有实际的图像尺寸。我think你可以使用calc https://developer.mozilla.org/en-US/docs/Web/CSS/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。