Html CSS Div 背景图像固定高度 100% 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15713668/
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
CSS Div Background Image Fixed Height 100% Width
提问by TheButlerDidIt
I'm trying to setup a series of div's with a background image that each have their own fixed height, and stretch to fill up the width, even if there is overflow on the top/bottom that is clipped. I just don't want the white space on the edges.
我正在尝试设置一系列带有背景图像的 div，每个 div 都有自己的固定高度，并拉伸以填充宽度，即使顶部/底部有溢出被剪裁。我只是不想要边缘的空白。
Currently, I have: http://jsfiddle.net/ndKWN/
目前，我有：http: //jsfiddle.net/ndKWN/
CSS
CSS
#main-container {
float:left;
width:100%;
margin:0;
padding:0;
text-align: center;
}
.chapter{
position: relative;
height: 1400px;
z-index: 1;
}
#chapter1{
background: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg) 50% 0 no-repeat fixed;
height:1200px;
}
#chapter2{
background: url(http://download.ultradownloads.com.br/wallpaper/94781_Papel-de-Parede-Homer-Simpson--94781_1680x1050.jpg) 50% 0 no-repeat fixed;
height:1200px;
}
回答by cr0ybot
See my answer to a similar question here.
在此处查看我对类似问题的回答。
It sounds like you want a background-image to keep it's own aspect ratio while expanding to 100% width and getting cropped off on the top and bottom. If that's the case, do something like this:
听起来你想要一个背景图像保持它自己的纵横比，同时扩展到 100% 宽度并在顶部和底部被裁剪。如果是这种情况，请执行以下操作：
.chapter {
position: relative;
height: 1200px;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/3/
jsfiddle：http: //jsfiddle.net/ndKWN/3/
The problem with this approach is that you have the container elements at a fixed height, so there can be space below if the screen is small enough.
这种方法的问题是容器元素处于固定高度，因此如果屏幕足够小，下方可能会有空间。
If you want the height to keep the image's aspect ratio, you'll have to do something like what I wrote in an edit to the answer I linked to above. Set the container's heightto 0 and set the padding-bottomto the percentage of the width:
如果您希望高度保持图像的纵横比，则必须执行类似于我在上面链接到的答案的编辑中所写的内容。将容器设置height为 0 并将 设置padding-bottom为宽度的百分比：
.chapter {
position: relative;
height: 0;
padding-bottom: 75%;
z-index: 1;
}
#chapter1 {
background-image: url(http://omset.files.wordpress.com/2010/06/homer-simpson-1-264a0.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
}
jsfiddle: http://jsfiddle.net/ndKWN/4/
jsfiddle：http: //jsfiddle.net/ndKWN/4/
You could also put the padding-bottompercentage into each #chapterstyle if each image has a different aspect ratio. In order to use different aspect ratios, divide the height of the original image by it's own width, and multiply by 100 to get the percentage value.
如果每个图像具有不同的纵横比，您还可以将padding-bottom百分比放入每种#chapter样式。为了使用不同的纵横比，将原始图像的高度除以其自身的宽度，再乘以100得到百分比值。
回答by Juan Rangel
You can use background-size: cover;
您可以使用 background-size: cover;
回答by Fabian Rios
But the thing is that the .chapter class is not dynamic you're declaring a height:1200px
但问题是 .chapter 类不是动态的，你声明的是 height:1200px
so it's better to use background:cover and set with media queries specific height's for popular resolutions.
所以最好使用 background:cover 并设置媒体查询的特定高度以获取流行分辨率。
