在本机延迟加载期间保持 Chrome 中图像的宽高比
更新：事实证明，这是由于Chrome 中的一个错误造成的。我仍在寻找解决方法。
我试图通过设置元素来在 Chrome 中使用延迟loading="lazy"加载img。我还使用以下方法让图像适合：
img {
max-width: 100%;
height: auto;
}不幸的是，在 Chrome 中，在图像实际加载之前显示的图像占位符具有方形长宽比。img它不遵循元素width/属性中设置的宽高比height。这种情况发生在以下条件下：
仅在 Chrome 中（不在 Firefox 75 中，Firefox 75 也支持延迟加载）。
仅当设置
loading="lazy". 如果没有此属性，则保留纵横比。
即使在延迟加载的情况下，是否有解决方案可以保留width/中设置的图像的纵横比？height
这是一篇文章，建议我所做的事情应该有效。另请参阅文章中嵌入的视频，也是这样说的。
如果使用 Chrome 的开发者工具限制网络速度，您可以通过下面的示例观察到问题。我提供了一个屏幕录制来说明问题。我不希望图像大小在加载后发生变化，因为它会导致页面元素移动。
https://i.stack.imgur.com/poiEP.gif
一个最小的例子
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>
CSS：
body {
max-width: 600px;
padding: 20px;
}
img {
border: solid black;
max-width: 100%;
height: auto;
}
图片：
https://i.stack.imgur.com/SII5r.png
Qyouu1回答
-
青春有我
Codesandbox DEMO （源代码）也许经典的 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>
随时随地看视频慕课网APP
相关分类
Html5
