img height＆＃34; jumps＆＃34;宽度：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

您可以将图像包装在基于百分比的padding-bottom的元素中。像这样：

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

其中X = Height / Width * 100。

Answer 2

尝试将图像大小设置为百分比而不是内联像素。

Answer 3

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