Question

我在贡品页面中第一次使用bootstrap，而我在jumbotron类中对背景图像的响应性有困难。当我调整屏幕大小时，只显示一半图像，您必须水平滚动才能看到整个图像。有没有办法让它自动调整并完全适合窗口。

我已经尝试使用此线程中找到的答案（图像拼贴并重复）：Responsive Bootstrap Jumbotron Background Image但由于问题不一样，它们无法解决问题。

HTML code：

<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”类的图像元素，就是这样。在这种情况下我该怎么做？

提前致谢！

Answer 1

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

#jumbotron1{
background-position:center center;
}

Answer 2

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

func

我们在这里使用媒体查询

Answer 3

这将解决您的问题

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

更多关于https://stackoverflow.com/a/31147923/7714663

Answer 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%;
}

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

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

4 个答案: