html - 如何使 CSS 背景响应特定尺寸

Question

我正在创建一个网站，我试图向页面添加一个背景图像，该图像覆盖整个页面并且是响应式的，但我很难这样做。每当我调整宽度和高度以匹配覆盖整个主页时，我显然发现当我将页面移动到另一个显示器或缩小窗口时尺寸不会缩放。但是，我需要调整宽度和高度以使图像覆盖页面。有没有一种方法可以让图像响应并根据自己的喜好调整尺寸？

#background-image-container {
  position: absolute;
  max-width: 100%;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

<div id="background-image-container">
  <img src="static/images/waco-siege2.jpg" id="background-image" style="opacity: 0.7; display: block;" width="1370" height="665">
</div>

我意识到我的代码一团糟，有些部分可能与其他部分相矛盾；但这只是展示了我目前尝试过的一切。

Answer 1

在我看来，你对你正在尝试做的事情的标记是错误的。您需要在容器元素上设置背景，而不是将图像放在其中。

<div id="background-image-container" style="background-image:url(static/images/waco-siege2.jpg)"></div>

我还认为您会希望使用 background-size:cover 而不是 contain。

您也可以只将图片的宽度和高度设置为 100%，但如果它改变纵横比，图片就会变形。