响应式图像在加载时没有布局重排

Question

为了让响应式图像在小屏幕上按比例缩小，我目前使用 max-width: 100%;（或固定的最大宽度）。与指定固定大小相反，这有一个可怕的缩小，因为当页面加载时，浏览器不会为图像分配 space 并且只能在开始下载后分配。这会导致大量布局回流，并且在所有图像加载完成之前体验不佳。

这似乎很容易修复 - 毕竟，我只需要告诉浏览器实际尺寸是多少，这样它就可以在下载之前计算出宽高比和最终尺寸。首先，我想知道这是否是 width 和 height html 属性的用途，但我知道这不是它们的目的，因为它们可用于重新缩放图像并更改最终图像尺寸。

我真正想要的是像“srcwidth”和“srcheight”这样的东西，它们会告诉浏览器图像文件的实际大小，这样它就不必在知道之前加载使用 max-width 样式的纵横比。但据我所知，没有像这些属性这样的东西。真的没有办法实现吗？

我尝试以这种方式使用实际的 width 和 height html 属性，然后用 CSS 覆盖它，但浏览器根本不关心这个.

Answer 1

我见过的最常见的解决方法是将所有图像放入容器中并使用 padding-bottom 属性到 "pre-allocate" 高度。

<div class="responsive-container">
    <img src="image.jpg"/>
</div>

为此，您需要知道图像的纵横比来计算填充。

使用纵横比计算高度

例如，对于 16:9 的纵横比（例如 800 x 450 像素），高度是宽度的 56.25%，因此这将是填充的值。

.responsive-container {
    width: 100%;
    padding-bottom: 56.25%; /* 9/16 = aspect ratio of image */
    position: relative;
    height: 0;
    overflow: hidden;
}

.responsive-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

不同的纵横比

如果您的图像将具有不同的纵横比，但您仍然会提前知道，您可以为每个图像设置不同的类，例如

.responsive-container {
    width: 100%;
    position: relative;
    height: 0;
    overflow: hidden;
}

.ratio-16-9{
    padding-bottom:56.25%; /* 9/16*100 */
}

.ratio-4-3{
    padding-bottom:75%; /* 3/4*100 */
}

.ratio-1-1{
    padding-bottom:100%; 
}

并在 html 中使用它：

<div class="responsive-container ratio-16-9">
    <img src="image.jpg"/>
</div>

动态计算身高

最后，如果你想让CSS为每个图片动态计算高度，你可以使用CSS calc()这样计算高度：

calc((image_height/image_width)*100%)

所以你的 CSS 将是： .responsive-container { 宽度：100%；位置：相对；高度：0；溢出：隐藏； }

然后你这样使用它：

<div class="responsive-container" style="padding-bottom: calc((426/640)*100%);" >
    <img src="image.jpg"/>
</div>

参考资料

响应式图像在加载时没有布局重排

Responsive images without layout reflow when they load

html

css

responsive-images