整页背景图片切掉顶部和底部答案

【问题标题】：Full page background image cutting off top and bottom整页背景图片切掉顶部和底部
【发布时间】：2019-05-01 13:51:15
【问题描述】：

我正在创建一个网站，在该网站中，我需要在所有设备上显示整页响应式背景图像。我在 Photoshop 中创建了这张图片，它是 2560 x 1440 (16:9)。

我在图像的顶部、底部、左侧和右侧添加了白色边框，与紫色背景形成鲜明对比，以便更容易看到正在发生的事情。

由于某种原因，在使用下面的代码时，图像的顶部和底部（白色边框）被切断了。

当我使用检查元素并将视口设置为 1920 x 1080 等时，此问题消失了...

我的显示器设置为 1920 x 1080 分辨率，我使用的是 Opera 浏览器，不过也在 IE 中进行了测试。

这是正在发生的事情的图片 - https://gyazo.com/fb5d44dfd5332e42f1406e1f427dbd4a

顶部和底部应该有等宽的白色边框，但由于某种原因没有。

任何和所有帮助表示赞赏。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    
    <link rel="stylesheet" href="css/styles.css">
    <title>Hello, world!</title>
  </head>
  <body>
  </body>
</html>

html { 
background: url(../media/placeholder.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

【问题讨论】：

我试过你的代码，它完全响应背景尺寸：封面；。

标签： html css responsive-design

【解决方案1】：

这是因为您使用的是background-size: cover，它正在做它应该做的事情。它将 100%“覆盖”元素，无论其大小如何调整，都不会在其周围留下任何“空白”空间，并且可能会切断元素。

尝试改用background-size: contain，这可能是您正在寻找的更多内容。 100% 的图像始终可见，但可能会在其周围留下一些空白。

这是每个 background-size 选项及其外观的一个很好的演示 https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

仅供参考，您不需要为此功能添加不同的供应商前缀（-o-*、-moz-* 和 -webkit-*）it's pretty well supported（当然，除非您需要支持 IE8、Firefox 3 等.)

【讨论】：