html - 为什么我的响应式背景图像在图像底部留下空白？

Question

我有一个响应式图像，在调整浏览器大小时在图像下方留下空白。我尝试了封面，但图像根本没有调整大小，只有将背景设置为 100% 才能提供完美的响应能力。我尝试了来自堆栈溢出的多种其他解决方案，但似乎都没有用。

此处错误:https://drive.google.com/open?id=0BxHtDrLLi2x5ckJNMVVNblRSSWc

CSS:

  #jumbotron{
  text-align:center;
  background-color:#71706e;
  padding-top:80px;
  width:100%;
  background: url(images/showcase5.jpg) no-repeat;
  background-size: 100%;
 }

html:

<section id = "jumbotron">
  <div class="text">
    <h1 class="animated slideInDown">Now now now!</h1>
    <h2 class="animated slideInDown">Now now now now<br> before your now do!</h2>
    <a href="#" class="learnMore " >Get Started</a>
  </div>
</section>
<div id="recent">
  <h3>Recent Projects</h3>
</div>

Answer 1

一般概念是将容器的 height 设置为 0，并使用与背景图像纵横比相匹配的垂直填充。要获得该填充，请将图像高度除以宽度，然后乘以 100 以获得百分比。然后 div 将缩放与背景图像相同。只需将背景大小设置为 100%、包含或覆盖。

#jumbotron {
  background: url('http://placehold.it/1920x1265') 0 0 no-repeat / cover;
  padding-bottom: 65.89%;
  height: 0;
  text-align: center;
}

<section id = "jumbotron">
  <div class="text">
    <h1 class="animated slideInDown">Now now now!</h1>
    <h2 class="animated slideInDown">Now now now now<br> before your now do!</h2>
    <a href="#" class="learnMore " >Get Started</a>
  </div>
</section>
<div id="recent">
  <h3>Recent Projects</h3>
</div>