css - 响应式背景图片 : How to handle height?

Question

我有一个带有背景图片的横幅:

<section id="banner" class="container" style="background:url(http://placehold.it/1170x200) no-repeat center 
center; background-size: 100% auto; height: 200px;">
</section>

我想让背景图像响应并相应地调整它的高度，但是正如您所见...我将高度设置为 200px 作为初始点，以便我们可以看到图像。我知道这是不对的，但我不确定如何将高度设置为“自动”，因为简单地写“高度:自动”是行不通的。

我该如何解决这个问题？ Live code here .

Answer 1

根据所需的结果，您可以使用背景属性cover 或contain。
用于展示差异的 fiddle CSS Background Cover vs Contain不同之处在于 cover 会将图像缩放到尽可能小，而 contain 会将图像缩放到尽可能大。如果您想缩放高度，contain 应该适合您。

 <section id="banner-contain" class="container"></section>
 <section id="banner-cover" class="container"></section>

#banner-contain.container {
  background-image: url(http://placehold.it/1170x200);
  background-repeat: no-repeat;
  background-size: contain;
  -moz-background-size: contain;
  height: 200px;
}
#banner-cover.container {
  background-image: url(http://placehold.it/1170x200);
  background-repeat: no-repeat;
  background-size: cover;
 -moz-background-size: cover;
  height: 200px;
}

引用:https://developer.mozilla.org/en-US/docs/Web/CSS/background-size