[css]如何让图片保持自适应大小同时在未加载时能占相应的空间

[jlak]

网页图片一多就因为大量懒加载图片逐渐加载调整导致网页跳跳闪闪 设置固定高宽能避免这种情况但是会失去自响应大小（ width:100% height:auto) 找到了设置高 0 padding 按宽比例但这样不显示图片 设置比例 vh 会完全固定高度 不会随着缩放变化 请问还有没有什么方法

[sayonara7]

CSS aspect-ratio

[brader]

要不让后端和你一起配合？在文件名上做文章来传递信息，比如后端存储图片，保存名字为 xxx_400_200 ，反正只要你们之间约定好一个格式就行了，这样你就能知道每一个图片 URL 对应的宽高

[old9]

如果图片比例稳定，试试 aspect -ratio

[jlak]

@sayonara7
@old9
谢谢！这属性完全符合我的需求！
我谷歌了一小时多没找到这个属性 找到了一堆旁门左道的实现方式
像是:: 然后 var 还 calc 什么的

[jlak]

@brader 还好图片全都是固定比例的😅只差了个属性

[zyy314680012]

隱約記得當年瀑布流剛開始流行的時候就是存儲了圖片的實際尺寸 然後前端根據尺寸來計算放什麼位置

[Rache1]

aspect-ratio 的兼容性还很差，

可以参考这一下实现，兼容性很强了

Aspect Ratio Boxes | CSS-Tricks - CSS-Tricks
https://css-tricks.com/aspect-ratio-boxes/#aa-using-custom-properties

[jlak]

@Rache1 谢谢建议，我试试看