"Background-image: cover" 在移动设备上损坏

Question

我正在尝试使我网站上的图像显示 100% 高度，但根据需要裁剪宽度。在 PC 上，该站点按预期运行，如下所示：

然而，当我用我的 phone 检查网站时，它显示的整个图像都扭曲了。

HTML:

<header class="wide">
</header>

CSS:

body, html {
    height: 100%;
}
.wide {
    width: 100%;
    height: 100%;
    background-image: url('sebastian-unrau-42537-unsplash.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}
@media (max-width: 1199.98px) {
    .wide {
        background-attachment: scroll;
        background-position: initial;
    }
}

媒体查询是强制性的，因为如果背景图像固定并居中，则图像根本不起作用。

现在如果我删除 "background-size: cover":

它有点接近我所追求的，但不完全是。我错过了什么吗？

我的电脑是运行 Chrome 66.0.3359.117 和我的 phone 65.0.3325.109

Answer 1

你可以使用这个属性 :

background-size: x% y%;

第一个值是水平位置，第二个值是垂直位置。

所以你可以试试:

background-size: auto 100%;

Answer 2

好吧，我是偶然发现的。我使用的是来自 Unsplash.com 的图像，原始分辨率为 6000x4000。当我在这里为 post 制作一个 Codepen 项目时，我调整了图像的大小，想知道为什么它在 codepen 上有效，但在我的电脑上却无效。好吧，分辨率似乎需要大约 5500x3667 或更小才能工作。

也许有一个我不知道的限制，但无论如何它现在可以工作了。我没有改变任何其他东西。

"Background-image: cover" 在移动设备上损坏

"Background-image: cover" broken on mobile

css

background-image

cover