html - 如何使 div 的背景响应？

Question

我有一个水平放置在 body 中间的容器，这个容器里面有一个 div，这个 div 有一个背景，我希望 div 的背景在缩小或调整窗口大小时像这里的网站一样响应 ask.fm ，我使用了 background-size: cover; 但它对我不起作用。

HTML

<div class="container">
  <div class="cover"></div>
</div>

CSS

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

Answer 1

我通常将这两件事结合起来 - 取决于屏幕尺寸 - 我会为图像/背景抓取不同的 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>

https://jsfiddle.net/sheriffderek/4j2avj7v/

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