更新：事實(shí)證明，這是由于Chrome 中的一個(gè)錯(cuò)誤造成的。我仍在尋找解決方法。我試圖通過設(shè)置元素來在 Chrome 中使用延遲loading="lazy"加載img。我還使用以下方法讓圖像適合：img {
max-width: 100%;
height: auto;
}不幸的是，在 Chrome 中，在圖像實(shí)際加載之前顯示的圖像占位符具有方形長寬比。img它不遵循元素width/屬性中設(shè)置的寬高比height。這種情況發(fā)生在以下條件下：僅在 Chrome 中（不在 Firefox 75 中，F(xiàn)irefox 75 也支持延遲加載）。僅當(dāng)設(shè)置loading="lazy". 如果沒有此屬性，則保留縱橫比。即使在延遲加載的情況下，是否有解決方案可以保留width/中設(shè)置的圖像的縱橫比？height這是一篇文章，建議我所做的事情應(yīng)該有效。另請(qǐng)參閱文章中嵌入的視頻，也是這樣說的。如果使用 Chrome 的開發(fā)者工具限制網(wǎng)絡(luò)速度，您可以通過下面的示例觀察到問題。我提供了一個(gè)屏幕錄制來說明問題。我不希望圖像大小在加載后發(fā)生變化，因?yàn)樗鼤?huì)導(dǎo)致頁面元素移動(dòng)。https://i.stack.imgur.com/poiEP.gif 一個(gè)最小的例子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
1 回答
青春有我
TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超8個(gè)贊
也許經(jīng)典的 padding-top hack 可能會(huì)有所幫助作為一種解決方法。
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>
- 1 回答
- 0 關(guān)注
- 142 瀏覽
添加回答
舉報(bào)
0/150
提交
取消