Html 全宽大屏幕图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20357594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full width jumbotron image
提问by Marc Brigham
I'm trying to make the image have the same width as the browser screen. It needs to be responsive. I'm new at bootstrap 3 so any help is greatly appreciated.
我试图使图像具有与浏览器屏幕相同的宽度。它需要响应。我是 bootstrap 3 的新手，因此非常感谢任何帮助。
Here is a code playground like for you to see exactly what I mean.
这是一个代码游乐场，让您确切了解我的意思。
You will see the jumbotron image is left aligned. I need it to stretch the full width of the page.
您将看到大屏幕图像左对齐。我需要它来拉伸页面的整个宽度。
采纳答案by Zim
回答by alans
According to the Bootstrap documentation, to make .jumbotronfull width, take it outside of any .container.
根据 Bootstrap 文档，要制作.jumbotron全宽，请将其放在任何.container.
回答by Diana De Jesus
I was having the same issue. I took mine outside of the container in html and used the following code in my CSS:
我遇到了同样的问题。我在 html 中将我的容器放在容器之外，并在我的 CSS 中使用了以下代码：
jumbotron {
position: relative;
background: url("img.url") no-repeat center center;
width:100%;
height: 100%;
background-size: 100% 100%;
}
