V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Dive into HTML5
http://diveintohtml5.org/
liudaqi
V2EX  ›  HTML

用 max-height 限制的区域,怎样在移动设备(竖向窄屏)上,也能保持不变形?

  •  
  •   liudaqi · 2018-09-07 17:09:39 +08:00 · 2250 次点击
    这是一个创建于 2029 天前的主题,其中的信息可能已经有所发展或是发生改变。

    要显示一块最大宽 /高比为 16:9 的一块区域,专门展示横向图片:

    • 如果是 16:10 或者 18:9 的那种尺寸,就按实际的图片大小显示;
    • 如果是竖向图片,就只截取图片上面一部分以 16:9 形状显示(如图所示)。但是在移动设备上,各个屏幕 DPI 不同,在一些窄屏上,16:9 都快成 16:16 的正方形了,部分老的 iphone5/5s 这种,甚至会变成将近 16:20 的那种形状。
    <div style="width: 640px">
        <div style="width: 100%; max-height: 360px; overflow: hidden;">
            <img src="#" />
        </div>
    </div>
    

    尝试了下用 rem 来调试,也适应不了各种不同的 dpi 设备。

    16-9.png

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1132 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 18:44 · PVG 02:44 · LAX 11:44 · JFK 14:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.