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％，包含或覆盖。

＆＃13;

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

＆＃13;

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

＆＃13;

为什么我的自适应背景图片会在图片底部留下空白区域？

1 个答案: