Question

我需要的是通过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 属性，而不是设置高度

Answer 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;
}

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

Updated JSFiddle

编辑：

如果您在下面的评论中指出，无论屏幕尺寸如何，都希望显示完整图像，请使用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;
}

一个关键字，可以尽可能地缩放图像并保持图像宽高比（图像不会被压扁）。图像在容器内是letterboxed。当图像和容器具有不同的尺寸时，空白区域（左/右上/下）用背景颜色填充。除非被其他属性（例如背景位置）覆盖，否则图像会自动居中。^{MDN Docs}

Updated JSFiddle

Answer 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）

Answer 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/

Answer 4

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

希望有所帮助！

响应背景问题

4 个答案:

编辑：