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

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

我有一些div带有

display:inline block

，因此它们可以很好地并排浮动。这些div都具有相同的高度，例如

高度：300px

。稍后，我将使用Ajax在每个DIV中加载一个图像，我希望DIV保持图像的纵横比，这样在实际加载图像时，它们不会到处摇摆

因此，当div显示在浏览器中时，图像还没有出现，因此使用

height:auto固定图像的高度不起作用

示例代码：

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

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

现在我知道了如何在给定宽度下保持元素的纵横比（请参见或）。但是既然我的div都应该有相同的高度，我怎么能保持纵横比而只改变宽度呢

一个（不是很好的）解决方案是插入一个空白图像，并将该图像调整到正确的尺寸

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

因此，我的问题是：如何仅通过CSS保持给定高度元素的纵横比

谢谢
我会根据我使用的模板设置DIV的宽度，这样它会响应，并将此添加到我的代码中：

img.item {
width:auto; height:300px;width: auto\9; // for IE
}

这将确保您可以控制DIV，同时图像将非常适合那里

注意，您可能需要将其更改为最大高度：300px；对于响应站点，您有纵横比，但没有实际的图像尺寸。我想你可以用这个函数来做这个浏览器支持是一个问题：


/*注意：使用30px高度进行演示*/
.项目{
显示：内联块；
垂直对齐：顶部；
高度：30px；
背景#FC0；
}
.比率-3-2.项目{
/* 3:2 = 1.5 */
宽度：计算（30px*1.5）；
}
.比率-4-3.项目{
/* 4:3 = 1.3333 */
宽度：计算（30px*1.3333）；
}

Thank you for your link的可能重复，但在我的示例中，DIV有一个固定的高度。你是对的，但图像尚未加载，只是包装DIV。在写入DIV时，我知道图像比率，但加载时，它将自动设置为Y，但这将导致屏幕上所有项目的晃动。这就是我想要绕过的。这是最接近的解决方案，谢谢。由于每个项目的比率不同，因此我将通过在domready-event中使用Javascript来更改宽度？如果div是通过（例如）PHP生成的，并且您有宽度和高度，那么您可以内联样式。确切地说，但是高度在样式表中，有几个断点