Bootstrap：调整屏幕大小时，jumbotron 类中的背景图像无响应答案

【问题标题】：Bootstrap: background image unresponsive in jumbotron class upon screen resizingBootstrap：调整屏幕大小时，jumbotron 类中的背景图像无响应
【发布时间】：2017-06-30 05:16:38
【问题描述】：

我第一次在致敬页面中使用引导程序，但我在 jumbotron 类中的背景图像的响应能力方面遇到了问题。当我调整屏幕大小时，只显示一半图像，您必须水平滚动才能看到整个图像。有没有办法让它自动调整并完全适合窗口。

我已经尝试使用在此线程中找到的答案（图像平铺和重复）：Responsive Bootstrap Jumbotron Background Image 但由于问题不一样，它们没有解决。

HTML 代码：

<div id="jumbotron1" class="jumbotron">
   <!-- title text -->
   <div id="title-container" class="container rounded">
       <h1 id="title-text" class="text-center">Hattie McDaniel</h1>
   </div>
</div>

CSS 代码：

#jumbotron1{
    background-image: 
url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
   background-size: cover; 
   height: 580px;
   padding: 0px;
   margin-bottom: 0px;
   background-repeat: no-repeat;
}

我知道，如果我不使用 jumbotron 类，我可以轻松地添加一个带有“img-fluid”类的图像元素，仅此而已。在这种情况下我该怎么做？

提前致谢！

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您可以尝试将背景位置设置为居中，如下所示：

#jumbotron1{
background-position:center center;
}

【讨论】：

我已经尝试过了，它确实改善了这种情况，但它裁剪了图像的顶部。将图像进一步向上移动。
尝试使用媒体查询为不同的屏幕尺寸设置不同的背景位置。也许这可能会有所帮助

【解决方案2】：

这将解决您的问题

#jumbotron {
background-image: 
  url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
background-size: cover;
height: 100%;}

【讨论】：

【解决方案3】：

您好，请在您的样式表中添加以下样式。

    #jumbotron1{
    background-image: 
    url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
    background-size: cover; 
    height: 580px;
    padding: 0px;
    margin-bottom: 0px;
    background-repeat: no-repeat;
  }

  @media (max-width:980px) { 
    #jumbotron1{background-image: 
    url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
    background-size: 100%;
    height: 360px;
    }
  }


  @media (max-width:768px) { 
    #jumbotron1{background-image: 
    url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
    background-size: 100%;
    }
  }

  @media (max-width:550px) { 
    #jumbotron1{background-image: 
    url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
    height: 180px;
    }
  }

我们在这里使用媒体查询

【讨论】：

【解决方案4】：

使整个背景图像适合的一种方法是使用background-size: 100% 100%;这使得背景图像尺寸始终适合。随着屏幕尺寸变小，它可能看起来有点奇怪

像这样添加一段代码：

#jumbotron1{
  background-image: 
  url('//cdn3.thr.com/sites/default/files/2015/02/hattie.png'); 
  background-size: cover; 
  height: 580px;
  padding: 0px;
  margin-bottom: 0px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

使用媒体查询在某些断点处更改背景图像可能会更好，因为背景图像在较小的屏幕尺寸上看起来很糟糕

【讨论】：