gpt4 book ai didi

html - 在 native 延迟加载期间保持 Chrome 中图像的纵横比

转载 作者:行者123 更新时间:2023-12-04 15:32:13 24 4
gpt4 key购买 nike

更新:原来这是由于 bug in Chrome .我仍在寻找解决方法


我试图通过在 img 元素上设置 loading="lazy" 来在 Chrome 中使用延迟加载。我还使用以下方法让图像适合:

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

不幸的是,在图像实际加载之前显示的图像占位符在 Chrome 中具有方形纵横比。它不遵循 img 元素的 width/height 属性中设置的纵横比。这发生在以下条件下:

  • 仅在 Chrome 中(不在 Firefox 75 中,后者也支持延迟加载)。
  • 仅当设置loading="lazy" 时。如果没有此属性,纵横比将保留。

是否有一种解决方案可以在延迟加载的情况下保持图像的纵横比,如 width/height 中所设置的那样?


Here's an article建议我正在做的事情应该有效。也请看文章中嵌入的视频,说的也是一样。


如果使用 Chrome 的开发人员工具限制网络速度,您可以在以下示例中观察到问题。我包括一个屏幕录像来说明问题。我不希望图像大小在加载后发生变化,因为它会导致页面元素移动。

enter image description here

一个最小的例子

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

图片:

enter image description here

最佳答案

Codesandbox DEMO (source code)


作为一种解决方法,经典的 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="/image/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="/image/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>

关于html - 在 native 延迟加载期间保持 Chrome 中图像的纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61027060/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com