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

求教前端大佬 H5 页面的背景图片在 iPhoneX 下面空白一块

  •  
  •   edison111cry · 2019-10-12 23:09:11 +08:00 · 2428 次点击
    这是一个创建于 1870 天前的主题,其中的信息可能已经有所发展或是发生改变。
    background-image: url('data/wechat/home_background.png');
    background-size: cover;
    background-repeat:no-repeat;


    加载的背景图片在其他手机上测试都是铺满屏幕,就是 iPhoneX 下面留白,有没有简单的方法来实现一下哈
    6 条回复    2019-10-13 13:16:47 +08:00
    1KN6sAqR0a57no6s
        1
    1KN6sAqR0a57no6s  
       2019-10-12 23:14:59 +08:00 via Android
    提供一下该元素 width 和 height 的定义
    edison111cry
        2
    edison111cry  
    OP
       2019-10-12 23:17:11 +08:00
    @YuxiangLuo 就直接是 body 里的哈
    1KN6sAqR0a57no6s
        3
    1KN6sAqR0a57no6s  
       2019-10-12 23:32:22 +08:00 via Android
    body 元素加一个 height: 100vh; 试试
    edison111cry
        4
    edison111cry  
    OP
       2019-10-12 23:43:40 +08:00
    @YuxiangLuo 空白倒是给补上了哈,图片也没有变 形,但是这个图片右边和下边有一部分超出屏幕看不到了,也不行呢。
    szz
        5
    szz  
       2019-10-13 12:48:08 +08:00
    试试 background-size: 100% 100%
    louieliu
        6
    louieliu  
       2019-10-13 13:16:47 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1164 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:10 · PVG 02:10 · LAX 10:10 · JFK 13:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.