我一直在尝试使用Bootstrap的Jumbotron来放置背景图片。非常简单易操作:
.jumbotron
{
background: url('path/to/images/banner.jpg') no-repeat center center;
background-size: cover;
}
和
<div class="jumbotron">
<div class="container">...</div>
</div>
它看起来很不错并且响应迅速。然而,Jumbotron只有内容所占空间那么大 - 而我的内容非常少。因此,它比我想象的要窄得多,我想增加其默认高度同时仍保持响应性。例如,像这样的东西是行不通的:
<div class="jumbotron">
<div class="container" style="height: 600px;">...</div>
</div>
高度是正确的,但图片不再具有响应性。我一直在研究各种可用的混合/变量,希望能找到能够利用的内容,但我没有什么运气。