如何在 jumbotron 中显示完整的背景图像？答案

【问题标题】：how to show the complete background image in a jumbotron?如何在 jumbotron 中显示完整的背景图像？
【发布时间】：2016-10-16 09:12:43
【问题描述】：

所以我意识到如果我有更多内容，它会显示完整的背景图像。有没有一种巧妙的方法来做到这一点？

<div class="jumbotron jumbotron-fluid" style="background: url('./assets/img/mhacks.jpg') no-repeat center center; margin-top: 120px;">
    <div class="container text-sm-center p-t-3">

        <br>
        <br>
        <br>
        <br>
        <p class="lead">Under construction</p>
        <br>
        <br>
        <br>


    </div>
</div>

【问题讨论】：

添加样式background-size: cover;或background-size: contain;。
@yariash 所以 background-size:contain 可以工作，只是它会大大缩小原始图像。有没有办法手动更改比例？

标签： html css twitter-bootstrap image

【解决方案1】：

改变你的html如下：

<div class="jumbotron jumbotron-fluid" style="background: url('variable-scope-ruby.jpg') no-repeat center center; margin-top: 120px;">
    <div class="container text-sm-center p-y-3">       
    <p class="lead">Under construction</p>
    </div>
</div>

还添加下面的css样式：

<style>
.lead{
  padding: 30px 0px;
  text-align:center;
}
</style>

并根据您的要求更新 .lead 填充。

【讨论】：

【解决方案2】：

我会尝试将contain 或cover 值用于background-size 属性：

.jumbotron.test {
  background: url(http://www.outdoor-photos.com/_photo/4488849.jpg) no-repeat;
  background-size: cover; /*** Try interchanging with contain/cover when using media queries for different results at different viewports. ***/
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="jumbotron jumbotron-fluid test">
    <div class="container text-sm-center p-t-3">
        <br>
        <br>
        <br>
        <br>
        <p class="lead">Under construction</p>
        <br>
        <br>
        <br>


    </div>
</div>

【讨论】：

当我用封面尝试你的代码时，它最终看起来像这样，并且包含它大大缩小了图像imgur.com/rSIFEo7
@MonaJalal 您是否包含background-repeat: no-repeat？还是将no-repeat 添加到background 属性中？

【解决方案3】：

  background:  bg-color bg-image position/bg-size bg-repeat; //shorthand

div{
      background: #333 url('../img-url.jpg') no-repeat center center;
      background-size: cover;
    }

【讨论】：