在本机延迟加载期间，在Chrome中保持图像的纵横比
更新：原来这是由于Chrome中的一个bug造成的。我仍在寻找解决办法。
我试图通过在img元素上设置load=“lazy”来在Chrome中使用延迟加载。我还使用以下方法来调整图像：
img {
max-width: 100%;
height: auto;
}
不幸的是，在图像实际加载之前显示的图像占位符在Chrome中有一个方形纵横比。它不遵循img元素的width/height属性中设置的纵横比。这在以下情况下发生：
- 仅在Chrome中（不在Firefox 75中，Firefox 75也支持延迟加载）。
有没有一种解决方案可以保持图像的宽高比，即使在延迟加载的情况下也是如此？
这里有一篇文章建议我所做的应该是有效的。也请看文章中的嵌入式视频，说同样的话。
如果使用Chrome的开发工具限制网络速度，您可以观察以下示例中的问题。我包括一个屏幕记录来说明这个问题。我不希望图像大小在加载后改变，因为它会导致页面元素四处移动。
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;
}
图像：
共有1个答案
Codesandbox演示（源代码）
也许一个经典的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>-
在我的网站上，用户可以上传图片。它们可以是各种大小的，但我想让它们装在相同高度的盒子里，这样它们就可以挨着放在一起，形成一个网格。图像应该在框中居中，保持其纵横比。我可以在CSS中这样做吗？我一直在尝试flexbox的东西，但我不能让它工作。
-
我有一个img元素，看起来像： 使用css： 现在，这意味着在保持纵横比的同时，将图像大小调整为最大高度：400px，或最大宽度：100%。虽然加载时图像会折叠到： 加载图像后，它向下推送文本： 我认为，由于图像的宽度和高度是内联的，浏览器应该已经知道它的纵横比了，图像就不会跳转了？我有什么遗漏吗？ 我想要的只是图像元素，在图像源加载之前，与图像的长宽比相同。使布局不跳来跳去！
-
我使用引导创建旋转木马，我有大的图像，所以当屏幕小于图像时，比例不会保持不变。 我怎么能改变呢？ 这是我的代码： http://jsfiddle.net/DRQkQ/ 我需要图像适合100%的宽度，但保持其高度为500px（我认为是500px），这应该意味着在较小的屏幕上，我们看不到图像的最左边和最右边。 我尝试将图像包含在div中并添加 但这不管用 非常感谢。
-
我试图使用jQuery懒惰加载在我的Laravel/Vue项目，但我正在努力让图像出现在我的Vue组件。我有以下img块，我认为会工作： 我确实在这里发现了另一个问题-Vue.js模板中的静态图像src-但是当我尝试该方法时，我得到了这样的结果： 因此，我切换回v-bind方法，但我得到的只是一个带有灰色边框的白色框-没有图像。但是，如果我在src属性上使用v-bind，我可以正确地看到图像。 我
-
编辑：我应该提到的是，我知道纵横比公式：原始高度/原始宽度x新宽度=新高度，但是，我不知道如何正确地使用它，以我的优势。
-
我有一个宽度为1900和高度为1000的图像，我使用的是和但我希望div高度与图像更改的高度相同。 示例： 在1366个屏幕中，图像将缩小尺寸以适应屏幕大小（宽度100%），因此，图像高度也将减小，因此我想获得该高度。 我试图做的是： HTML： CSS： 问题：vw是用滚动条宽度计算的，我想要没有，我可以使用宽度%而不是vw吗？ 我接受别人的想法来做这件事，但我更喜欢使用CSS。