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

Question

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

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

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

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

Answer 1

我见过的最常见的解决方法是将所有图像放入容器中，并使用 padding-bottom 属性“预分配”高度。

<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%； position:relative； 高度:0； 溢出:隐藏；

然后你像这样使用它:

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

引用资料

• Responsive images – how to prevent reflow
• Responsive Images Without Browser Reflow
• MDN Web Docs for CSS calc()