移动设备上打破了“背景图片：封面”

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

您可以使用此属性：

background-size: x% y%;

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

所以你可以尝试：

background-size: auto 100%;

Answer 2

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

也许有一个我不知道的限制，但无论如何让它现在正常工作。我没有改变任何其他事情。