【问题标题】：Full width jumbotron image全宽 jumbotron 图像
【发布时间】：2015-08-03 08:06:36
【问题描述】：

我正在尝试使图像具有与浏览器屏幕相同的宽度。它需要响应。我是 bootstrap 3 的新手，因此非常感谢任何帮助。

这是一个代码游乐场，您可以准确了解我的意思。

您将看到 jumbotron 图像左对齐。我需要它来拉伸页面的整个宽度。

【问题讨论】：

【解决方案1】：

根据 Bootstrap 文档，要使 .jumbotron 全宽，请将其置于任何 .container 之外。

【讨论】：

【解决方案2】：

使 img 宽度为 100%..

.widewrapper {
  width:100%;
  }

.widewrapper > img {
  width:100%;
}

Bootply

【讨论】：

创建 custom.css 并向其中添加新规则然后从 html 中引用它通常很好。 stackoverflow.com/questions/14623441/…
当然，但这与获取上面的 CSS 完成的全宽图像无关。

【解决方案3】：

我遇到了同样的问题。我将我的容器放在 html 中，并在我的 CSS 中使用了以下代码：

jumbotron {
position: relative;
background: url("img.url") no-repeat center center;
width:100%;
height: 100%;
background-size: 100% 100%;
}

【讨论】：