响应式背景问题

Question

响应式背景问题

3

我需要的是通过CSS实现响应式全屏背景图片，例如像这个网站那样。

我在这里阅读了很多案例并看到了一个“最佳答案”响应式css背景图片的主题。但我仍然找不到适合我的解决方案。这是我的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 的解决方案。

- Alexandr Belov

使用 background-size: cover; 吗？ - Jacob G

我的回答是否给您带来了预期的结果？！ - John Slegers

@John Slegers 是和不是都有。是 - 它的表现稍微好一些，不是 - 当我调整浏览器窗口大小时，它仍然会被裁剪约40%。 - Alexandr Belov

1

@AlexandrBelov：那是因为你设置了固定高度。你需要删除高度并用基于100％的填充替换它。 - John Slegers

@AlexandrBelov：我刚刚更新了我的答案。现在能给你期望的结果了吗？！ - John Slegers

4个回答

1

这应该能解决问题：

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)

- John Slegers

1

有两种方法，具体取决于您的最终目标。第一种方法是使用background-size: cover;，这将保持纵横比，但如果您使用低分辨率图像，则可能导致背景图像出现像素化。另一种方法是使用background-size: 100% 100%;。请注意，在您的fiddle中，您只使用了简单的100%。通过添加2次，可以强制X和Y轴跨越屏幕的100％。 cover的fiddle：https://jsfiddle.net/eqe3m2sn/1/ 100% 100%的fiddle：https://jsfiddle.net/nmofhodo/1/

- sqlt

0

将您的background-position: center;更改为background-position: top;，它将在调整大小时填充上方的空间。至于大小，我相信在使用背景图片时需要设置高度。

希望能有所帮助！

- max234435

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jacob G · Accepted Answer

只需在.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 文档}

更新的 JSFiddle

编辑：

如果您在下面的评论中所示，希望显示完整的图像，而不考虑屏幕大小，请使用{{link3：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文档

更新的JSFiddle