html - img 高度 "jumps"宽度 : 100% on site load

Question

我有一个简单但棘手的问题。例如包装宽度为 500px。里面有一个可变大小的图像(大于包装)。

<div class="wrapper">
    <img src="image.jpg" width="1000" height="500" />
</div>

所以如果我将 CSS 设置为:

.wrapper {
    width: 500px;
}

.wrapper img {
    width: 100%;
    height: auto;
}

图像高度在站点加载时“跳跃”(由于缓存，仅在第一次加载时)。有没有办法在不明确设置图像高度的情况下停止这种“跳跃”？

这将是一个适合移动设备的网站，因此我在各种屏幕分辨率下使用 @media 更改包装器宽度，因此我无法明确设置图像高度。

Answer 1

您可以将图像包装在一个元素中，该元素具有基于百分比的填充底部。像这样:

<div style="height: 0px; padding-bottom: X%">

哪里X = Height / Width * 100 .