V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
kisshere
V2EX  ›  程序员

css 怎样让一张图片无论怎样缩放保持固定的长宽比?

  •  
  •   kisshere · 2019-05-28 15:33:21 +08:00 · 3846 次点击
    这是一个创建于 1766 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如一张图片:800x800px, 怎样通过 css,让其长宽比始终保持 2:1,比如,设置该图片 width:100%,父 div 宽度 500px 的时候,该图片高度:250px ;父 div 宽度 300px 的时候,该图片高度:150px

    纯 css 不用 js 怎样实现?

    11 条回复    2019-05-29 09:36:06 +08:00
    guojam
        1
    guojam  
       2019-05-28 15:48:54 +08:00
    建议用 div+background,<img>标签不是很容易实现
    yimity
        2
    yimity  
       2019-05-28 16:20:02 +08:00
    搜索一下图片百分比 img ratio,原理就是 padding-top 百分制的时候,参考计算使用的是 width,所以可以限制比例,然后 img absolute 就可以了。
    catteroLo
        3
    catteroLo  
       2019-05-28 18:12:59 +08:00
    wednesdayco
        4
    wednesdayco  
       2019-05-28 18:26:09 +08:00
    object-fit:contain;是不是你的需求- -
    KuroNekoFan
        5
    KuroNekoFan  
       2019-05-28 18:37:45 +08:00 via iPhone
    object-fit 没错了
    IsaacYoung
        6
    IsaacYoung  
       2019-05-28 19:05:20 +08:00
    padding-bottom: 50%;
    background: url(xxxx);
    molvqingtai
        7
    molvqingtai  
       2019-05-28 19:31:24 +08:00 via Android
    利用父元素的 padding 撑出高度,img 绝对定位
    azh7138m
        8
    azh7138m  
       2019-05-28 19:46:54 +08:00
    learnshare
        9
    learnshare  
       2019-05-28 20:03:29 +08:00   ❤️ 1
    写一个 2:1 的容器,然后图片丢到容器里 100% * 100% 即可,方法楼上提到了多种

    实例 https://codepen.io/anon/pen/OYwOZd
    dr2009
        10
    dr2009  
       2019-05-29 09:09:22 +08:00
    object-fit
    erda
        11
    erda  
       2019-05-29 09:36:06 +08:00
    var + calc 也可以实现
    栗子: https://codepen.io/Erdayo/pen/YbOyOa
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3255 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:16 · PVG 22:16 · LAX 07:16 · JFK 10:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.