V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
jlak
V2EX  ›  问与答

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

  •  
  •   jlak · 2023-07-24 17:54:51 +08:00 · 650 次点击
    这是一个创建于 466 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    8 条回复    2023-07-24 19:33:51 +08:00
    sayonara7
        1
    sayonara7  
       2023-07-24 18:01:47 +08:00 via iPhone   ❤️ 1
    CSS aspect-ratio
    brader
        2
    brader  
       2023-07-24 18:01:56 +08:00
    要不让后端和你一起配合?在文件名上做文章来传递信息,比如后端存储图片,保存名字为 xxx_400_200 ,反正只要你们之间约定好一个格式就行了,这样你就能知道每一个图片 URL 对应的宽高
    old9
        3
    old9  
       2023-07-24 18:03:42 +08:00 via Android
    如果图片比例稳定,试试 aspect -ratio
    jlak
        4
    jlak  
    OP
       2023-07-24 18:10:42 +08:00
    @sayonara7
    @old9
    谢谢!这属性完全符合我的需求!
    我谷歌了一小时多没找到这个属性 找到了一堆旁门左道的实现方式
    像是:: 然后 var 还 calc 什么的
    jlak
        5
    jlak  
    OP
       2023-07-24 18:11:12 +08:00
    @brader 还好图片全都是固定比例的😅只差了个属性
    zyy314680012
        6
    zyy314680012  
       2023-07-24 18:18:03 +08:00 via Android
    隱約記得當年瀑布流剛開始流行的時候就是存儲了圖片的實際尺寸 然後前端根據尺寸來計算放什麼位置
    Rache1
        7
    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
        8
    jlak  
    OP
       2023-07-24 19:33:51 +08:00 via iPhone
    @Rache1 谢谢建议,我试试看
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2809 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 06:33 · PVG 14:33 · LAX 23:33 · JFK 02:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.