Html 如何使div的背景响应？ 我有一个容器，它水平放置在身体的中部，这个容器里面有一个div，这个div有一个背景， 我希望div的背景在缩小或调整窗口大小时能做出响应，就像这个站点一样，我使用了背景大小：cover但它对我不起作用

HTML

---

我通常会结合这两件事-取决于屏幕大小-我会为图像/背景或内联获取不同的src

<section class="container">
<div class="inner-w">

  <figure>
    <img src="https://placehold.it/1600x900" alt="">
  </figure>

</div>
</section>



<section class="container section-name">
<div class="inner-w">

  <!-- ... -->

</div>
</section>

---

尝试

背景大小：包含什么意思
背景尺寸：封面
不适合你？发生了什么，你在期待什么？你想让整个图像可见吗？@MichaelCoker是的，我查看了同一问题的另一个答案，他们告诉我使用背景大小：cover@LeonFreire不幸的是，它也不起作用：（@MichaelCoker有一些有用的问题。你应该回答它们，Moawya.：）了解Chrome的开发工具，然后你可以检查你喜欢的网站，看看他们是如何编写CSS的。您给出的最后一个.fm示例使用了背景大小：cover；这里有一个小介绍：）
.container {
  width: 851px;
  margin: 0px auto;
}

.cover {
  background-image: url("wall.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 300px;
}

/* Media Queries */
@media screen and (max-width: 840px) {
  .cover {
    width: 100%;
  }
  .container {
    width: 100%;
  }
}

@media screen and (max-width: 600px) {
  .container {
    padding: 0;
  }
}

<section class="container">
<div class="inner-w">

  <figure>
    <img src="https://placehold.it/1600x900" alt="">
  </figure>

</div>
</section>



<section class="container section-name">
<div class="inner-w">

  <!-- ... -->

</div>
</section>

figure {
  margin: 0;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
}

.container {
  background: gray;
  border: 1px solid blue;
}

.container .inner-w {
  max-width: 400px; /* just for this example... likely 900+ */
  margin: 0 auto;
  background: red;
}

.section-name .inner-w {
  min-height: 300px; /* it needs to have some shape */

  background-image: url('http://placehold.it/1600x900');
  background-size: cover;
  background-position: center center;
}