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

2023-07-24 17:54:51 +08:00
 jlak

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

690 次点击
所在节点    问与答
8 条回复
sayonara7
2023-07-24 18:01:47 +08:00
CSS aspect-ratio
brader
2023-07-24 18:01:56 +08:00
要不让后端和你一起配合?在文件名上做文章来传递信息,比如后端存储图片,保存名字为 xxx_400_200 ,反正只要你们之间约定好一个格式就行了,这样你就能知道每一个图片 URL 对应的宽高
old9
2023-07-24 18:03:42 +08:00
如果图片比例稳定,试试 aspect -ratio
jlak
2023-07-24 18:10:42 +08:00
@sayonara7
@old9
谢谢!这属性完全符合我的需求!
我谷歌了一小时多没找到这个属性 找到了一堆旁门左道的实现方式
像是:: 然后 var 还 calc 什么的
jlak
2023-07-24 18:11:12 +08:00
@brader 还好图片全都是固定比例的😅只差了个属性
zyy314680012
2023-07-24 18:18:03 +08:00
隱約記得當年瀑布流剛開始流行的時候就是存儲了圖片的實際尺寸 然後前端根據尺寸來計算放什麼位置
Rache1
2023-07-24 18:18:53 +08:00
aspect-ratio 的兼容性还很差,

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

Aspect Ratio Boxes | CSS-Tricks - CSS-Tricks
https://css-tricks.com/aspect-ratio-boxes/#aa-using-custom-properties
jlak
2023-07-24 19:33:51 +08:00
@Rache1 谢谢建议,我试试看

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/959316

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX