在图片加载之前保持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%，同时保持其宽高比。但是当加载图像时，图像会变形成：

而且图像加载后，会将文本向下推：

我认为由于图像具有内联的宽度和高度，浏览器已经知道了其宽高比，因此图像不应该跳来跳去才对吧？我错过了什么吗？

我想要的只是让图像元素在加载图像源之前与图像将要呈现的相同宽高比。使布局不会跳来跳去！

- bitten

Answer 1

现在，所有主要的浏览器都可以在其当前版本中完成这项工作。

当您在img标签上指定HTML中的width和height属性，并且在CSS中将width（百分比或固定值，也可以是max-width）和height设置为auto（或反之亦然），浏览器会计算出正确的大小和纵横比，直到图像被加载。当图像加载时，它使用已加载图像的尺寸，因此这些尺寸不应与您设置的属性不同，否则您将再次获得布局移位。

但请注意，无效的图像或无法加载的图像可能会与尚未加载的图像处理方式不同。不能保证img的width和height属性会被考虑。（如果您想测试行为，则特别重要，您不能简单地删除src属性的值，这不会给您带来与尚未加载的图像相同的结果。）

此外需要注意，响应式图片（picture 元素和 img 元素的 srcset 属性）仍然存在问题，具体信息请参考以下链接。

这里有一篇更详细的文章，介绍了浏览器支持等更多信息：https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ 注意：仅为您的图像提供 width 和 height 可以在新的 Lighthouse CLS（累计布局偏移）测量中得到更好的结果，请参见 https://web.dev/cls/。

- Creepin

---

这个答案很有帮助，但是width和height的不同用法有点令人困惑。您能否更清楚地说明需要设置width和heightHTML属性，然后在_CSS_中将其中一个设置为自动？ - talljosh

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;
}

此外，Tarik在他的回答中所说的是正确的，如果您声明了自动高度和宽度，则最大高度和最大宽度将无效。"最初的回答"

- Claire

---

啊，好的。但是如果你告诉浏览器图片的高度和宽度，为什么它不能自动计算剩下的部分呢？我正在尝试使用你的CSS，但是在处理竖向图片时遇到了困难...如果有进展，我会再联系你的 :p - bitten

浏览器现在可以这样做：https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ - Creepin

Answer 3

你将宽度和高度设置为auto。这意味着大小将根据当前加载的图像而不是与max-height或max-width有关的任何内容进行设置。

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

明确一点，当你将宽度和高度设置为auto时，你正在覆盖你设置的其他设置，并告诉浏览器检测图像的大小。当图像正在下载时，它无法这样做，因此它会表现出你描述的行为。

你可以使用JavaScript在检测到图像完成加载后编程地设置这些属性。

- tarik