响应式背景问题答案

【问题标题】：Responsive background issue响应式背景问题
【发布时间】：2016-07-02 20:20:02
【问题描述】：

我需要的是通过 CSS 响应的完整背景图片，比如 there。

我在这里阅读了很多案例，还看到了该主题的“最佳答案”之一 Responsive css background images

但我仍然找不到适合我的解决方案。 Here's my Fiddle

和代码：

.container {
 background-image: url(http://www.spektyr.com/PrintImages/Cerulean%20Cross%203%20Large.jpg);
 background-repeat: no-repeat;
 background-size: 100%;
 background-position: center;
 height: 700px;

}

如果没有按照上面答案中的建议设置任何高度，图像根本不会出现。当我将窗口调整为更小时，图像会在上方获得一些空间，而不是每次都适合窗口。

我做错了什么？

解决方案

经过数小时的实验，解决方案是使用 padding-top 属性而不是设置 height

【问题讨论】：

使用background-size: cover;?
我的回答是否给你预期的结果？！
@John Slegers 是和否。是的 - 它“表现”好一点，不 - 当我调整浏览器窗口的大约 40% 时，它仍然会被裁剪。
@AlexandrBelov ：那是因为您设置了固定高度。您需要删除高度并将其替换为 100% 的填充。
@AlexandrBelov ：我刚刚更新了我的答案。它现在给你预期的结果了吗？！

标签： css background-image

【解决方案1】：

只需在.container 上使用background-size:cover; 即可：

.container {
  background-image: url(http://www.spektyr.com/PrintImages/Cerulean%20Cross%203%20Large.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 700px;
}

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

Updated JSFiddle

编辑：

如您在下面的 cmets 中指出，如果您希望显示完整图像，无论屏幕大小如何，请使用 background-size:contain;：

.container {
  background-image: url(http://www.spektyr.com/PrintImages/Cerulean%20Cross%203%20Large.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: contain;
  height: 700px;
}

尽可能大地缩放图像并保持图像纵横比（图像不会被压扁）的关键字。图像在容器内加了信箱。当图像和容器具有不同的尺寸时，空白区域（左/右的顶部/底部）用背景色填充。除非被其他属性（例如 background-position）覆盖，否则图像会自动居中。^{MDN Docs}

Updated JSFiddle

【讨论】：

如果我们设置“background-size:cover”它不会帮助解决这个问题。因为如果将窗口大小调整为更小，当图像停止调整大小并被裁剪时，就会出现一个断点。我刚刚检查过了。
@AlexandrBelov 所以无论屏幕尺寸如何，您都希望图像完全显示，但不失真？
没错！想象它每次都是相同的图像，当你调整窗口大小时，它只是被缩放而不是被裁剪。
@AlexandrBelov 更新了答案

【解决方案2】：

这应该可以解决问题：

body {
    margin: 0;
}

.wrap {
    width: 100%;
}

.menu {
    top: 0;
    position: fixed;
    background-color: green;
    width: 100%;
}

.container {
    background-image: url(http://www.spektyr.com/PrintImages/Cerulean%20Cross%203%20Large.jpg);
    background-size: cover;
    padding-bottom: 100%; /* <- This value should be equal to height / width */
}

<div class="wrap">
    <nav class="menu">
        <ul>
            <li>Something</li>
        </ul>
    </nav>
    <div class="container"></div>
</div>

（另见this Fiddle）

【讨论】：

【解决方案3】：

根据您的最终目标，您会想到两种方法。第一种是使用background-size: cover;，它将保持纵横比，但如果您的图像分辨率较低，可能会导致背景图像像素化。另一种是使用background-size: 100% 100%;。请注意，在您的小提琴中，您有简单的100%。通过添加 2 次，强制 X 轴和 Y 轴跨越屏幕的 100%。

cover 的小提琴：https://jsfiddle.net/eqe3m2sn/1/

100% 100% 的小提琴：https://jsfiddle.net/nmofhodo/1/

【讨论】：

【解决方案4】：

将您的background-position: center; 更改为background-position: top;，它会在调整大小时填充上面的空间。至于尺寸，我很确定您在处理背景图片时需要设置高度。

希望有帮助！

【讨论】：