Css 回应性背景问题

我需要的是通过CSS响应的完整背景图像，比如说

我在这里读了很多案例，也看到了这个话题的“最佳答案”之一

但我仍然找不到适合我的解决方案。

和代码：

.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

只需在

容器上使用即可，如：

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

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


编辑：
如您在下面的注释中所示，若您希望显示完整图像，而不考虑屏幕大小，请使用：

一个关键字，它可以最大限度地缩放图像并保持图像的纵横比（图像不会被压扁）。图像在容器中以字母框显示。当图像和容器具有不同的尺寸时，空区域（左/右的顶部/底部）将填充背景色。除非被其他属性（如背景位置）覆盖，否则图像将自动居中

这应该可以做到：


正文{
保证金：0；
}
.包裹{
宽度：100%；
}
.菜单{
排名：0；
位置：固定；
背景颜色：绿色；
宽度：100%；
}
.集装箱{
背景图片：url(http://www.spektyr.com/PrintImages/Cerulean%20Cross%203%20Large.jpg);
背景尺寸：封面；
填充底部：100%；/*根据您的最终目标，您会想到两种方法。第一种方法是使用
背景大小：cover；
，这将保持纵横比，但如果您的图像分辨率较低，可能会导致背景图像像素化。另一种方法是使用
背景大小：100%100%；
。请注意，在您的小提琴中，您可以使用ave simple
100%
。通过添加2次，可以强制X轴和Y轴在屏幕上的跨度达到100%

拨弄
封面
：

拨弄
100%100%
：
将
背景位置：中间；
更改为
背景位置：顶部；
，它将在调整大小时填充上面的空间。至于大小，我很确定在处理背景图片时需要设置高度

希望能有所帮助！
使用
背景尺寸：封面；
？我的回答是否给出了预期的结果？！@John Slegers是和否。是-它“正常”更好一点，不是-当我调整浏览器窗口的大小时，大约40%的窗口仍然会被裁剪。@AlexandBelov:那是因为你设置了一个固定的高度。你需要删除高度，并用100%的填充替换它。@AlexandBelov:我刚刚更新了我的答案。现在它会给你预期的结果吗？！如果我们设置了背景尺寸：封面"这对情况没有帮助。因为如果你将窗口的大小调整到更小，当图像停止调整大小并被裁剪时，会有一个断点。我刚刚检查过。@AlexandBelov所以你想让图像完全显示，但不失真，不管屏幕大小如何？没错！想象一下，每次都是同一个图像，只被缩放b但是当你调整窗口大小时，没有被裁剪。@AlexandBelov更新了答案“background position:contain”也必须像我所说的那样工作，但它确实会使图像暴露。当我们调整到较小的大小时，div+会在周围添加一些空间。
.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;
}