Javascript 在 Bootstrap 中为标题设置全宽背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36449636/
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
Setting full width background image for the header in Bootstrap
提问by Kaw123
My question is how can i set full width and height background image for the header in Bootstrap like http://demo.evenfly.com/view?theme=SantaGo( i am not expecting animations, i am expecting how to make background that fits in to screen like this)?
我的问题是如何在 Bootstrap 中为标题设置全宽和高度背景图像http://demo.evenfly.com/view?theme=SantaGo（我不期待动画，我期待如何制作适合这样的屏幕的背景）？
This is what i have done so far,
这是我到目前为止所做的，
https://codepen.io/anon/pen/reYRBo
https://codepen.io/anon/pen/reYRBo
HTML:
HTML：
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="sltac.css">
</head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
<img src="http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg" class="img-responsive" alt="Cinque Terre" width="100%" height="40%" back>
</div>
</header>
</body>
</html>
CSS:
CSS：
body{
margin:0;
padding:0;
width:100%;
}
#jumboid{
width:100% ;
}
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px; /* corresponds to max height of 450px */
margin: 0 auto;
}
header{
width:100%;
height:100%;
height:calc(100% - 1px);
background-image:url('a.jpg');
background-size:cover;
}
At the end i'm expecting the result like this(if i take full page screen shot),
最后，我期待这样的结果（如果我截取整页屏幕截图），
回答by Marco Klein
There is no need to use an extra image tag. Just set the background and the property background-size: cover
无需使用额外的图像标签。只需设置背景和属性background-size: cover
Try it like this:
像这样尝试：
html,
body {
width: 100%;
height: 100%;
}
header {
width: 100%;
height: 100%;
background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg) center center no-repeat;
background-size: cover;
}<body>
<header>
</header>
</body>回答by Pimmol
Do you have an imgtag inside the #jumboid?
你img里面有标签#jumboid吗？
In case you don't, you can easily fix it with a background-imageon #jumboid.
如果不这样做，您可以使用background-imageon轻松修复它#jumboid。
Edit the css as following:
编辑css如下：
#jumboid{
width:100% ;
height: 100vh;
background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
background-size: cover;
background-repeat: no-repeat;
}
(forked) example: https://codepen.io/pimskie/pen/wGPOar
（分叉）示例：https: //codepen.io/pimskie/pen/wGPOar
回答by Himanshu Aggarwal
Simply use, using containkeeps your bg-img scalable and responsive-
简单地使用，使用contain可以让你的 bg-img 保持可扩展性和响应性-
background-size:contain;
background-size:contain;
OR if want to have a fixed header height and wan't to keep the image background scaled upto header's width-
或者，如果想要具有固定的标题高度并且不想将图像背景缩放到标题的宽度 -
background-size:100% 100%;
background-size:100% 100%;
回答by Yashpal Sindhav
Put your image in background of DIV by css not in <img>tag.
通过 css 而不是<img>标签将您的图像放在 DIV 的背景中。
and give that DIV below CSS.
并在 CSS 下方给出该 DIV。
.Your_DV {
background-image: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
background-position: fixed;
background-size: cover;
background-repeat: no-repeat;
}
回答by K.Shrestha
Hi try this code and Is this what you are looking for.
嗨，试试这个代码，这就是你要找的。
body {
margin: 0;
padding: 0;
width: 100%;
}
#jumboid {
width: 100%;
}
.bg-image {
position: relative;
background: url("http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg") no-repeat center center /cover;
height: 450px;
background-attachment: fixed;
}
.bg-image img {
display: block;
width: 100%;
margin: 0 auto;
}
header {
width: 100%;
height: 100%;
height: calc(100% - 1px);
background-image: url('a.jpg');
background-size: cover;
}<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="sltac.css">
</head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
</div>
</div>
</header>
<div class="restofthecontent">
<p>your content</p>
</div>
</body>
</html>