当收缩时，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