css - "Background-image: cover"在手机上损坏

Question

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

但是，当我用手机查看该网站时，它显示的是整个图像，但图像失真了。

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，我的手机运行 65.0.3325.109

Answer 1

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

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