修复了没有设置高度的背景图像

Question

我有一个 div 元素，它必须有一个固定的背景图像，因此当您滚动内容时，它会滚动。我的问题是我必须为那个特定的 div 元素设置一个高度才能看到它。那是因为该 div 中没有任何内容。

CSS

#top-banner{
    background-image: url(../img/grey.jpg);
    background-attachment:fixed;
    height:700px;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

HTML

<div class="container-fluid">
    <div class="row" >
        <div class="col-sm-12" id="top-banner"></div>
    </div>
    <div class="row">
        <div class="col-sm-12 text-center" >
            <h1 class="band-name">Lorem Ipsum</h1>
        </div>
    </div>
</div>

这给了我想要的大屏幕：

但是当您缩小浏览器时，就像您在手机或平板电脑上一样，该 div 的高度会降低所有内容，使其看起来没有吸引力：

有没有办法不给它一个特定的高度，这样内容就不会在较小的屏幕上被下推，但仍然有固定的背景图像？

编辑 这是一个要检查的小提琴。 http://jsfiddle.net/0xbfhwnt/

我重申：起初看起来不错，但是当您将浏览器缩小时，图像会按预期缩小，但 div 的高度保持在图像下方而不是与图像齐平背景图像 div。

Answer 1

您是否考虑过媒体查询方面的一些事情？

这是第一次迭代：

http://jsfiddle.net/0xbfhwnt/2/

@media (min-width: 400px) and (max-width: 700px) {
 #top-banner{
    height: 200px;   }

}

@media (min-width: 200px) and (max-width: 399px) {
 #top-banner{
    height: 100px;   }

}

---

更新

因此，使用媒体查询，您可以跟踪主 div 的大小一直到最小的屏幕大小。

在这个例子中，所有的空格都消失了。

http://jsfiddle.net/0xbfhwnt/7/

@media (min-width: 500px) and (max-width: 800px) {
 #top-banner {
    height: 200px;}
}

@media (min-width: 375px) and (max-width: 499px) {
 #top-banner {
    height: 150px;}
}

@media (min-width: 250px) and (max-width: 374px) {
 #top-banner {
    height: 100px;}
}

@media (min-width: 50px) and (max-width: 249px) {
 #top-banner {
    height: 50px;}
}

当然，min-width 和max-width 之间的范围越小，过渡就越平滑。