响应式 Bootstrap Jumbotron 背景图像

Posted 2023-03-06

【中文标题】响应式 Bootstrap Jumbotron 背景图像

【英文标题】：Responsive Bootstrap Jumbotron Background Image

【发布时间】：2014-03-26 21:10:53

【问题描述】：

我正在使用 bootstrap jumbotron，并包含背景图片。调整屏幕大小会使图像平铺并重复，而我希望图像能够响应地调整大小。

<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
   <div class="container for-about">
   <h1>About</h1>
   </div>
</div>

您将如何使图像具有响应性？ The site is HERE。感谢您的想法！

【问题讨论】：

你可以用“cover”代替“100%”

在图片上处理合适的尺寸是非常重要的一步。我发现使用sketch3 已经缓解了很多这些问题。

【参考方案1】：

最简单的方法是将background-size CSS 属性设置为cover：

.jumbotron 
  background-image: url("../img/jumbotron_bg.jpg");
  background-size: cover;

【讨论】：

我使用封面作为背景尺寸，但在我的情况下，客户希望图像的整个高度始终可见。当屏幕宽度超出 jumbotron 图像的宽度时，他们希望图像扩展到大于 100% 的宽度和高度。

【参考方案2】：

这就是我所做的。 首先，只需覆盖 jumbotron 类，然后执行以下操作：

.jumbotron
    background: url("bg.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;

所以，现在您有了一个具有响应式背景的超大屏幕。 但是，正如 Irvin Zhan 已经回答的那样，背景的高度仍然无法正确显示。

您可以做的一件事是用一些空格填充您的 div，例如：

<div class="jumbotron">
    <div class="container">
        About
        <br><br><br> <!--keep filling br until the height is to your liking-->
    </div>
</div>

或者，更优雅的是，您可以设置容器的高度。您可能需要添加另一个类，以免覆盖 Bootstrap 容器类。

<div class="jumbotron">
    <div class="container push-spaces">
        About
    </div>
</div>

.push-spaces

    height: 100px;

【参考方案3】：

我发现这对我来说非常有效：

.jumbotron 
background-image: url(/img/Jumbotron.jpg);
background-size: cover;
height: 100%;

您可以调整屏幕大小，它始终占据 100% 的窗口。

【讨论】：

我只会添加min-height: 300px;

【参考方案4】：

我就是这样做的：

<div class="jumbotron" style="background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
  <h1>Hello</h1>
</div>

【讨论】：

请在您的回答中添加更多详细信息 :-)

我没有更改 css 上的 .jumbotron 类（或其他任何东西）。正如我写的那样，我只是直接在 html 文件中添加了这种样式。

这种方法比修改 CSS 要好得多，因为 jumbotron 通常只在网站上出现一次此外，通过内联插入设置，它可以像我的情况一样以编程方式生成代码框架。我有一个 jumbotron() 函数，每次生成页面时都会将随机图像插入到 jumbotron 中。这允许在网站上创建一个很好的随机性，而无需使用轮播

【参考方案5】：

你可以试试这个：

只需将代码放在html文件头部的样式标签中

<style>
        .jumbotron 
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        
</style>

或者如下图放在单独的css文件中

        .jumbotron 
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        

使用 center center 将图像水平和垂直居中。 使用cover让图片填满jumbotron空间，最后no-repeat让图片不重复。

【讨论】：

它有帮助。谢谢琼！

【参考方案6】：

TLDR： 使用background-size: 100% 100%;。

background-size: cover; 可能会截断图像的某些部分，从而导致效果不佳。

使用background-size: 100% 100%; 可以强制图像占用height 和width 的父元素的100%。

有关更多信息，请参阅W3Schools。

这是一个有效的响应式jumbotron 背景图片：

<div class="jumbotron"  style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;">
    <h1>Welcome</h1>
    <p class="lead">Your message here</p>
    <p><a href="http://www.YourLinkHere.com" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

【参考方案7】：

不幸的是，没有办法制作div height respond to the background-size。我使用过的最简单的解决方案是在包含该背景图像的 jumbotron 中添加一个 img 标签。

【参考方案8】：

以下代码适用于所有屏幕：

.jumbotron 
   background: url('backgroundimage.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;

cover 属性将调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或从边缘剪掉一点。