检查与实际移动设备的背景图像不同答案

【问题标题】：Background image differing in inspect vs actual mobile检查与实际移动设备的背景图像不同
【发布时间】：2017-08-13 00:02:44
【问题描述】：

我正在尝试让背景图像在移动视图上正确定位。当我使用检查（或将显示器大小重新调整为移动视图）查看网站时，图像显示良好。但是，当我通过手机查看它时，由于某种原因，图像似乎正在调整大小以适应手机宽度。

#hero{
    height: 100vh;
    max-width: 100%;
    background-image: url('http://i.imgur.com/molLHMj.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

<body>
    <div id='hero'>
    </div>
</body>

如果我没记错的话，将背景大小设置为封面会这样，如果图像大于屏幕宽度，它就会被隐藏，但这似乎是出于某种原因调整大小。

编辑：

将 background-size 设置为 auto 会显示图像，就像它在 chrome 的检查器中的样子一样。这不应该是这种情况，因为更宽的版本会显示完整的宽度/高度（假设它是自动的）。我真的不知道发生了什么。

编辑2

看起来只有 chrome 移动版会这样显示。默认浏览器呈现背景就像它在桌面检查器中的样子。真的很奇怪。

【问题讨论】：

标签： css

【解决方案1】：

图像正在调整大小，因为您用height: 100vh; 告诉它。此外，由于您使用 max-width: 100%; 对 width 进行了限制，因此图像会出现偏差。

仅设置max-width: 100%;（并删除height:100vh）或删除两行并仅使用background-size:cover 可以解决此问题。

但是，如果您希望背景覆盖整个查看区域，请不要将背景放在div 上。事实上，去掉div，只需将背景应用到body。

另外，background-size:cover 不会导致图像隐藏，它会导致图像调整大小以覆盖可用的背景。当背景尺寸小于图像时，这会导致裁剪。

来自MDN：

封面

与包含相反的关键字。尽可能大地缩放图像并保持图像纵横比（图像不被压扁）。图像“覆盖”了整个宽度或高度容器。当图像和容器的尺寸不同时，图像被剪裁为左/右或上/下。

【讨论】：

如果我想让 div 覆盖整个查看屏幕，同时防止它在移动设备上重新调整大小，那会怎样？如果不将其高度专门设置为 100vh，我不太确定如何做到这一点。提前致谢！
@Iruss 如果您希望背景覆盖整个查看区域，请不要将背景放在div 上。实际上，去掉div，只需将背景应用到body。
我试图获得多个 div，它们会用全尺寸的背景图像填满整个屏幕。我猜没有其他方法可以做到这一点？
@Iruss 好吧，总有办法做任何事情，但这里的问题是，为什么？你想达到什么目的？
我正在尝试获取具有不同背景图像的多个 div，这些图像填满了整个查看屏幕。所以我猜它看起来像是登陆页面的多个部分。

【解决方案2】：

你可以这样实现你的目标：

.hero {
height:100vh;
width:100%;
}

.hero:nth-child(1) {
background-image:url('http://placehold.it/1920x1080');
background-size:cover;
}
    
.hero:nth-child(2) {
background-image:url('http://i.imgur.com/molLHMj.jpg');
background-size:cover;
}

<div class="hero"></div>
<div class="hero"></div>

【讨论】：

这似乎给了我在移动设备上查看时相同大小的背景图像。
查看更新的答案。如果我不明白这不起作用，我深表歉意。让我知道它在移动设备上的作用。
上述问题中似乎显示了相同的图像。图片正在调整为移动设备的宽度，而不是被裁剪。

【解决方案3】：

问题似乎是图像的大小。它的宽度约为3000。当我将其大小调整到 ~1900 左右时，行为恢复正常。

【讨论】：