爲什麼我的響應背景圖像在圖像的底部留下空白區域？

當調整瀏覽器大小時，我有一個響應圖像會在圖像下留下空白區域。我試過封面，但圖像並沒有調整大小，只將背景設置爲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>

來源

2017-05-16 J.Pillonin

你想整個圖像，以適應空白或周圍的其他方式？ – Joscplan

如果圖像的縱橫比大於元素（即太寬，高度不足），那麼將背景大小設置爲100％只會使其適合寬度。如果您想要完全覆蓋元素，請使用'background-size：cover'。 – Terry

我想要在調整大小時查看整個圖像，並且還想要刪除空白區域和加入圖像的內容。當我使用封面時，圖像不再響應，但空間已填滿 –

的一般概念是將容器的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>

來源

2017-05-16 22:13:30

非常感謝我花了很多時間試圖讓這個工作。我將不得不花費一些時間試着理解它是如何工作的，儘管它讓我頭疼。再次感謝邁克爾！ –

@ J.Pillonin沒有汗水。爲了它的價值，我在這裏學習了製作響應式YouTube視頻的技巧。 https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php –

@ J.Pillonin這項技術要求該元素爲'position：relative'（*如果它有內容*）並且這些內容需要'位置：絕對'另外明智的填充和內容大小加起來，它失去了比例。 –

爲什麼我的響應背景圖像在圖像的底部留下空白區域？

回答

相關問題