我正在尝试使网站上的图像显示100%的高度,但根据需要显示裁切宽度。在PC上,该站点可以按预期工作,如下所示:

css - 手机上的“背景图片:封面”破裂-LMLPHP

但是,当我用手机检查该站点时,它会显示整个图像失真。

css - 手机上的“背景图片:封面”破裂-LMLPHP

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”:

css - 手机上的“背景图片:封面”破裂-LMLPHP

这有点接近我所追求的,但并不完全相同。我想念什么吗?

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

最佳答案

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

也许有一个我不知道的局限性,但是无论如何现在它已经可以工作了。我什么都没改变。

css - 手机上的“背景图片:封面”破裂-LMLPHP

关于css - 手机上的“背景图片:封面”破裂,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49941234/

10-12 12:47
查看更多