背景图像在移动设备上的外观与在PC浏览器中的移动预览上的外观不同

Question

我的网站上有一些随机公寓的背景图片，在PC上和PC上的移动预览（使用Firefox Developer Edition）上看起来都不错。 但是，当我在iPhone 7上打开它时，效果并不佳，它只显示图像的左上角。

这是在我的PC上的样子：

这就是我的iPhone 7上的样子：

这是具有该背景图像的div的CSS：

#home {
    background: url("../images/seaview/mainpic1.jpg") no-repeat center center fixed;
    display: table;
    height: 100vh;
    position: relative;
    width: 100%;
    background-size: cover;
    text-align: center;
}

Answer 1

好像您缺少background-size的值，而是留给浏览器使用。 只需为背景图像的CSS规则添加cover ：

background: url("../images/seaview/mainpic1.jpg") no-repeat center center cover;

资源： https ： //developer.mozilla.org/en-US/docs/Web/CSS/background-size