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

Question

我在我的网站上有一张随机公寓的背景图片，在PC上和PC上的移动预览（使用Firefox开发人员版）上看起来都不错。 但是，当我在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的值并将其留给浏览器。只需将cover添加到背景图像的CSS规则中即可：

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

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