IMG高度"jumps"宽度：现场负载100%

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%">

其中CCD_ 3。

Answer 2

尽量使图像大小以百分比为单位，而不是以像素为单位。

Answer 3

删除图像上的height属性，并从css中删除height。