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作为初始点，以便我们可以看到图像。我知道这是不对的，但我不确定如何将高度设置为＆＃39; auto＆＃39;简单地写作＆＃34;身高：汽车＆＃34;不起作用。

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

Answer 1

根据所需的结果，您可以使用背景属性cover或contain 用于展示差异的小提琴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

Answer 2

做了类似的事情：

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

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

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

2 个答案: