Css 响应背景图像：如何处理高度？

我有一个横幅，背景图像如下：

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

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

---

我该怎么解决这个问题

根据所需的结果，您可以使用背景属性

cover

或

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

#banner-contain.container{
背景图片：url(http://placehold.it/1170x200);
背景重复：无重复；
背景尺寸：包含；
-moz背景大小：包含；
高度：200px；
}
#横幅覆盖容器{
背景图片：url(http://placehold.it/1170x200);
背景重复：无重复；
背景尺寸：封面；
-moz背景尺寸：封面；
高度：200px；
}

---

参考资料：

做了如下操作：

<section class="container">
  <img class="test" src="http://placehold.it/1170x200">
</section>

.test{
   height: auto;
   margin-right: auto;
   margin-left: auto;
   max-width: 100%;
}

.测试{
高度：自动；
右边距：自动；
左边距：自动；
最大宽度：100%；
}

这取决于您希望高度相对于宽度做什么-您是否试图保持原始图像的纵横比？你想让它保持同样的高度吗？你想让它由容器的大小来引导，还是容器只是为了能够将背景图像显示为背景？好问题。我只想保持纵横比。不需要同样的高度。是的，容器只是简单地将背景图像显示为背景。