html - 如何在大型电子秤中显示完整的背景图像？

所以我意识到如果我有更多的内容，它显示完整的背景图像。有什么好方法可以做到这一点吗？

<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>

最佳答案

我将尝试使用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>