在加载图像之前，保持img元素的纵横比？

Question

我有一个img元素，看起来像：

<img src="header-900x600.jpg" class="header-image" alt="" width="900" height="600" style="background-color: rgb(4, 96, 247);">

使用css：

.header-image {
    display: block;
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
}

现在，这意味着在保持纵横比的同时，将图像大小调整为最大高度：400px，或最大宽度：100%。虽然加载时图像会折叠到：

加载图像后，它向下推送文本：

我认为，由于图像的宽度和高度是内联的，浏览器应该已经知道它的纵横比了，图像就不会跳转了？我有什么遗漏吗？

我想要的只是图像元素，在图像源加载之前，与图像的长宽比相同。使布局不跳来跳去！

Answer 1

您将宽度和高度设置为auto。这意味着大小将设置为当前加载的图像，而不是与最大高度或最大宽度有关。

请注意，这可能是CSS的重复：为给定高度保留元素的纵横比

需要明确的是，当您将宽度和高度设置为“自动”时，您将覆盖您设置的其他设置，并告诉浏览器检测图像的大小。图像在下载时无法下载，因此其行为与您描述的一样。

在检测到图像加载完成后，可以通过编程使用javascript设置这些属性。

Answer 2

浏览器在加载图像之前对图像一无所知。您不能设置不存在的元素的参数。相反，只需将图像添加到具有全宽度的容器中，如下所示：

<div class="container">
   <img src="header-900x600.jpg" class="header-image">
</div>

.container {
    display: block;
    width: 100%;
}    

.header-image {
    display: block;
    max-width: 100%;
    max-height: 400px;
}

塔里克在他的回答中所说的也是正确的，如果你宣布自动高度和宽度，那么最大高度和最大宽度什么也不做。

Answer 3

所有主要浏览器现在都能够在其当前版本中做到这一点。

当您在img标签上的超文本标记语言中指定宽度和高度属性并在CSS中设置宽度（百分比或固定，也max-wide有效）和高度到自动（反之亦然）浏览器计算出正确的大小和长宽比，直到加载图像。加载图像时，它使用加载图像的尺寸，因此这些不应与您设置的属性不同，否则您将再次获得布局偏移。

然而，请注意，无效图像或无法加载的图像可能与尚未加载的图像不同。不能保证考虑img的宽度和高度属性。（如果您想测试行为，这一点尤其重要，您不能简单地删除src属性的值，这不会得到与尚未加载的图像相同的结果。）

另请注意，如以下链接所述，响应图像（picture元素和img元素的srcset属性）仍然存在问题。

这里有一篇很棒的文章，提供了更详细的信息和浏览器支持：https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/

注意：只需为图像提供宽度和高度，就可以更好地实现新灯塔CLS（累积布局偏移）测量，请参阅https://web.dev/cls/