css - 响应式背景问题

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 属性而不是设置 height 的解决方案

Answer 1

只需使用 background-size:cover;在 .container 上，如:

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

A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.^{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;
}

A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.^{MDN Docs}

Updated JSFiddle