Bootstrap jumbotron背景圖像額外的空間縮小時

Question

當縮小瀏覽器窗口並查看jumbotron時，會有額外的空間在圖像下方不斷擴大。

它看起來像這樣：

正常100％的寬度

50％瀏覽器寬度：

20％瀏覽器寬度（移動，問號是膨脹額外的空間） ：

當我調整瀏覽器的大小時，灰色的額外空間會展開和收縮。

這是我的jumbotron CSS;

.jumbotron { 

    background-image: url('Banner_responsive.jpg')!important; 
    background-size: 100% !important; 
    background-repeat: no-repeat !important; 
    padding-bottom: 17px !important; 
    margin-bottom: -5px !important; 

} 

Answer 1

當您使用單值語法時，background-size屬性應用自動高度。試試這個：

background-size: 100% 100%; 

Demo

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size