“背景图片：封面”在手机上坏了

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;
    }
}

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

现在如果我删除“背景尺寸：封面”：

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

我的电脑运行的是 Chrome 66.0.3359.117，我的手机运行的是 65.0.3325.109

Answer 1

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

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

Answer 2

你可以使用这个属性：

background-size: x% y%;

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

所以你可以试试：

background-size: auto 100%;