背景图像与实际手机的差异

我试图在手机视图中正确定位背景图像。当我查看网站时（或将显示器重新设置为移动视图），图像显示正常。但是，当我通过手机查看图像时，出于某种原因，图像似乎正在重新调整大小以适应电话宽度。背景图像与实际手机的差异

#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>

如果我没有记错，设置背景大小为掩护将让这个如果图像比屏幕宽度更大，它会简单地隐藏，但由于某种原因，这似乎正在调整大小。

编辑：

设置背景大小自动显示像它看起来像在Chrome的检查图像。这不应该是这样，因为更宽的版本显示全宽/高（假设它是自动的）。我真的迷失在发生的事情上。

EDIT2

貌似只有铬移动版显示这种方式。默认浏览器呈现背景，就像桌面检查器中的外观一样。真奇怪。

来源

2017-08-11 Iruss

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

来源

2017-08-12 16:02:44 Iruss

图像正在调整大小，因为您要用height: 100vh;来告诉它。此外，由于您在width上限制了max-width: 100%;，因此图片会发生倾斜。

只设置max-width: 100%;（并删除height:100vh）或删除两条线，只是坚持与background-size:cover可以清除这一点。

但是，如果您希望背景覆盖整个查看区域，请勿将背景放在div上。事实上，摆脱div，并将背景应用于body。

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

从MDN：

盖

即是含有逆A关键字。将图像缩放至尽可能大并保持图像宽高比（图像不会变为）。图像“覆盖”容器的整个宽度或高度。当图像和容器具有不同的尺寸时，图像将被剪裁到左/右或顶部/底部。

来源

2017-08-11 19:41:03

如果我想让div覆盖整个屏幕，同时防止它在手机上重新调整大小，那会是怎样？我不太确定我会如何做到这一点，没有专门设置它的高度是100vh。提前致谢！ – Iruss

@Iruss如果希望背景覆盖整个查看区域，请勿将背景放在'div'上。实际上，摆脱'div'并将背景应用到'body'。 –

我试图让多个div填充整个屏幕的全尺寸背景图像。我猜测没有其他方法可以这么做？ – Iruss

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

.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>

来源

2017-08-11 20:28:22 scramlo

这似乎给我在移动设备上查看时调整大小的背景图像。 – Iruss

查看更新的答案。我很抱歉，如果我不明白这是不是工作。让我知道它在移动设备上的作用。 – scramlo

相同的图像似乎显示在上面的问题。图像正在被调整到移动的宽度，而不是被裁剪掉。 – Iruss

背景图像与实际手机的差异

回答

相关问题