在原生延迟加载期间保持 Chrome 中图像的纵横比

Question

Update: It turns out that this is due to a bug in Chrome .更新：事实证明这是由于Chrome 中的一个错误。 I am still looking for workarounds .我仍在寻找解决方法。

I am trying to use lazy loading in Chrome by setting loading="lazy" on img elements.我正在尝试通过在img元素上设置loading="lazy"在 Chrome 中使用延迟加载。 I also use the following to let images fit:我还使用以下内容让图像适合：

img {
  max-width: 100%;
  height: auto;
}

Unfortunately, the image placeholder that is shown before the image actually loads has a square aspect ratio in Chrome.不幸的是，在图像实际加载之前显示的图像占位符在 Chrome 中具有方形纵横比。 It does not follow the aspect ratio set in the img element's width / height attributes.它不遵循img元素的width / height属性中设置的纵横比。 This happens under the following conditions:这发生在以下条件下：

Only in Chrome (not in Firefox 75, which, also supports lazy loading).仅在 Chrome 中（不在 Firefox 75 中，也支持延迟加载）。
Only when setting loading="lazy" .仅在设置loading="lazy"时。 Without this attribute, the aspect ratio is preserved.如果没有此属性，则保留纵横比。

Is there a solution to preserving the aspect ratio of the image, as set in width / height , even with lazy loading?是否有解决方案来保留图像的纵横比，如width / height中设置的那样，即使延迟加载也是如此？

Here's an article suggesting that what I am doing should work.这是一篇文章，建议我正在做的事情应该有效。 Please also see the embedded video in the article, saying the same.另请参阅文章中的嵌入式视频，说同样的话。

You can observe the problem with the below example if throttling the network speed using Chrome's developer tools.如果使用 Chrome 的开发人员工具限制网络速度，您可以通过以下示例观察问题。 I include a screen recording to illustrate the problem.我包括一个屏幕录像来说明问题。 I do not want the image size to change after loading because it causes page elements to shift around.我不希望加载后图像大小发生变化，因为它会导致页面元素移动。

A minimal example一个最小的例子

The HTML: HTML：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium nibh tellus, ac luctus erat viverra sed. Aliquam sed nisi sed sapien tempus consectetur vestibulum vel diam. Ut vel faucibus metus. Donec non sem et purus luctus dictum nec et elit. Suspendisse et ipsum tortor. Proin eros massa, pulvinar a ante eu, imperdiet consequat dolor. Pellentesque sed lacus nulla. Mauris gravida purus sed facilisis sollicitudin.
</p>
<p>
    <img src="image.png" width="850" height="422" loading="lazy">
</p>
<p>
Vivamus sagittis faucibus elit non feugiat. Curabitur interdum nulla sed ligula pharetra, in faucibus tortor ullamcorper. Curabitur tristique libero in lobortis posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque quis velit sed tellus aliquet dictum. Fusce vitae consectetur lacus. In scelerisque varius euismod. Nunc scelerisque enim quis lacus dignissim tincidunt. Nulla suscipit, odio eu dictum condimentum, massa elit vestibulum leo, ut lobortis dolor felis vel erat. Cras dapibus, nunc eget sollicitudin semper, elit nisl dictum leo, non semper quam nunc consequat augue. Vivamus bibendum mauris sapien, vel sagittis urna consequat ut.
</p>
</body>
</html>

The CSS: CSS：

body {
    max-width: 600px;
    padding: 20px;
}

img {
    border: solid black;
    max-width: 100%;
    height: auto;
}

The image:图片：

Answer 1

Codesandbox DEMO (source code) Codesandbox DEMO （源码）

Maybe a classic padding-top hack might help as a workaround .也许经典的padding -top hack 可能会有所帮助。

 body { max-width: 600px; padding: 20px; } img { border: solid black; max-width: 100%; height: auto; box-sizing: border-box; } @supports (--foo: 1) {.aspect, .aspect-inline { position: relative; }.aspect { padding-top: calc(var(--height) / var(--width) * 100%); height: 0; display: block; }.aspect-inline { display: inline-block; vertical-align: middle; }.aspect img, .aspect-inline img { position: absolute; top: 0; max-height: 100%; } }

 <p> <picture class="aspect-inline" style="width: 50px; height: 24.8px"> <img src="https://i.stack.imgur.com/SII5r.png" loading="lazy" width="50" height="24,8" /> </picture> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium nibh tellus, ac luctus erat viverra sed. Aliquam sed nisi sed sapien tempus consectetur vestibulum vel diam. Ut vel faucibus metus. Donec non sem et purus luctus dictum nec et elit. Suspendisse et ipsum tortor. Proin eros massa, pulvinar a ante eu, imperdiet consequat dolor. Pellentesque sed lacus nulla. Mauris gravida purus sed facilisis sollicitudin. </p> <p> <picture class="aspect" style="--width: 850; --height: 422"> <img src="https://i.stack.imgur.com/SII5r.png" loading="lazy" width="850" height="422" /> </picture> </p> <p> Vivamus sagittis faucibus elit non feugiat. Curabitur interdum nulla sed ligula pharetra, in faucibus tortor ullamcorper. Curabitur tristique libero in lobortis posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque quis velit sed tellus aliquet dictum. Fusce vitae consectetur lacus. In scelerisque varius euismod. Nunc scelerisque enim quis lacus dignissim tincidunt. Nulla suscipit, odio eu dictum condimentum, massa elit vestibulum leo, ut lobortis dolor felis vel erat. Cras dapibus, nunc eget sollicitudin semper, elit nisl dictum leo, non semper quam nunc consequat augue. Vivamus bibendum mauris sapien, vel sagittis urna consequat ut. </p>

在原生延迟加载期间保持 Chrome 中图像的纵横比

问题描述

A minimal example一个最小的例子

1 个解决方案

解决方案1
2 已采纳 2020-04-06 16:27:29

在原生延迟加载期间保持 Chrome 中图像的纵横比

问题描述

A minimal example一个最小的例子

1 个解决方案

解决方案1 2 已采纳 2020-04-06 16:27:29

解决方案1
2 已采纳 2020-04-06 16:27:29