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

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

  •  
  •   kisshere · 51 天前 · 1192 次点击
    这是一个创建于 51 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    纯 css 不用 js 怎样实现?

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

    实例 https://codepen.io/anon/pen/OYwOZd
        10
    dr2009   51 天前
    object-fit
        11
    erda   51 天前
    var + calc 也可以实现
    栗子: https://codepen.io/Erdayo/pen/YbOyOa
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3993 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 23ms · UTC 02:25 · PVG 10:25 · LAX 19:25 · JFK 22:25
    ♥ Do have faith in what you're doing.