Question

我有一个超大屏幕

<div class="jumbotron" id="intro">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>...</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
      </div>
</div>

使用以下css

#intro
{
    background: url('../images/bg.jpg') no-repeat center center;
    background-size:cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.jumbotron
{
    min-height: 400px;
}

但是当我调整窗口大小时，图像不会调整大小并居中。但是，如果我删除

.jumbotron
    {
        min-height: 400px;
    }

图像调整大小并正确居中。

Answer 1

嘿这个link我之前提到过同样的问题。将图像置于jumbotron中心。

Answer 2

请将#intro id 背景尺寸更改为100％，而不是背景尺寸覆盖，请检查以下示例我使用的是 background-size：100％100％;

#intro
{
    background: url('https://www.w3schools.com/w3images/lights.jpg') no-repeat center center;
    background-size:100% 100%;
}
.jumbotron
{
    min-height: 400px;
}

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <div class="jumbotron" id="intro">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>...</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
      </div>
</div>

Bootstrap 3：更改Jumbotron高度会导致背景图像不会在调整大小时居中

2 个答案: