jQuery 带引导程序的全屏响应式背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24721935/
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 screen responsive background image with bootstrap
提问by zack
I'm new to twitters bootstrap. What want to know is the HTML mockup that i have to use for a full screen responsive background image with bootstrap?
我是 twitters bootstrap 的新手。想知道的是我必须用于带引导程序的全屏响应式背景图像的 HTML 模型吗？
certainly I'm suing the mockup
我当然要起诉这个模型
<div class="container-fluid">
<div class="wrapper">
</div>
</div>
Before the wrapper i do have a navigation menu. I want to add a full screen image to div class wrapper. and i want wrapper div to scale 100%. any tips will be greatly appreciated.
在包装器之前，我确实有一个导航菜单。我想向 div 类包装器添加全屏图像。我希望包装器 div 缩放 100%。任何提示将不胜感激。
回答by Anju Aravind
Two options
两种选择
use
img-responsiveclass if you are using tag.<div class="wrapper"> <img src="pic_1.jpg" class="img-responsive" alt="Responsive image"> </div>if you are using css use this.
.wrapper{background: url('/assets/64531/green_suburb.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
img-responsive如果您使用标签，请使用类。<div class="wrapper"> <img src="pic_1.jpg" class="img-responsive" alt="Responsive image"> </div>如果您正在使用 css，请使用它。
.wrapper{background: url('/assets/64531/green_suburb.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
