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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

This topic created in 1012 days ago, the information mentioned may be changed or developed.

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

8 replies • 2023-07-24 19:33:51 +08:00

sayonara7

Jul 24, 2023 via iPhone

CSS aspect-ratio

brader

Jul 24, 2023

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

old9

Jul 24, 2023 via Android

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

jlak

Jul 24, 2023

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

jlak

Jul 24, 2023

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

zyy314680012

Jul 24, 2023 via Android

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

Rache1

Jul 24, 2023

aspect-ratio 的兼容性还很差，

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

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

jlak

Jul 24, 2023 via iPhone

@Rache1 谢谢建议，我试试看