Html 所有浏览器中的背景图像居中且 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2803479/
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
Background image centered and 100% in all browsers
提问by jamietelin
What is the best practice to set a background image centered and 100% (so that it fills the screen, but still retains the aspect ratio) in all browsers?
在所有浏览器中设置背景图像居中和 100%（使其充满屏幕，但仍保留纵横比）的最佳做法是什么？
采纳答案by Diodeus - James MacFarlane
Picking up an old post, since there is a new method to do it with good browser support.
拿起旧帖子，因为有一种新方法可以在良好的浏览器支持下做到这一点。
Use background-imagelike this:
background-image像这样使用：
background-size:cover;
background-position:center;
This will not destroy the proportions of the image but scale it as best as possible never showing any black bars (or what ever would be in the background).
这不会破坏图像的比例，而是尽可能地缩放图像，从不显示任何黑条（或背景中的任何内容）。
Browser support is almost perfect as you can see on Can I use it?. Opera Mini could be an issue, but the browser will probably be replaced by Vivaldi soon.
正如您在Can I use it?上看到的，浏览器支持几乎是完美的。. Opera Mini 可能是一个问题，但浏览器可能很快就会被 Vivaldi 取代。
In conclusion I think that this is definetly the way to go, since it′s by far the cleanest and most reliable solution and very easy to edit with JS aswell.
总之，我认为这绝对是要走的路，因为它是迄今为止最干净、最可靠的解决方案，并且也很容易用 JS 进行编辑。
回答by jamietelin
Best solution I have managed to make so far is as follows;
到目前为止，我设法做出的最佳解决方案如下；
//CSS
<style type="text/css">
body {
margin:0; padding:0;
}
html, body, #bg {
height:100%;
width:100%;
}
#bg {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
z-index:0;
}
#bg img {
width:100%;
min-width:100%;
min-height:100%;
}
#content {
z-index:1;
}
</style>
//HTML
<body>
<div id="bg">
<img style="display:block;" src="bgimage.jpg">
</div>
<div id="content">
//Rest of content
</div>
</body>
Might this be best way? Anyone see any problems with doing it this way?
这可能是最好的方法吗？有人看到这样做有什么问题吗？
Thanks for your time!
谢谢你的时间！
回答by Diodeus - James MacFarlane
The best practice is to notto do what you want to do.
最好的做法是不要做你想做的事。
By specifying 100% you are going to stretch (thus distort) the image.
通过指定 100%，您将拉伸（从而扭曲）图像。
The best way to have a simple, centered background is like this:
拥有简单、居中背景的最佳方法是这样的：
body {
background-image:url(Images/MyBG.png);
background-position:center top;
background-repeat:no-repeat
}
EDIT:
编辑：
Now you CAN target different resolutions and use a different background image, depending on the size by specifying a resolution-dependent stylesheet. You can use separate stylesheets just to define the one background element with different files in each.
现在您可以针对不同的分辨率并使用不同的背景图像，这取决于通过指定依赖于分辨率的样式表的大小。您可以使用单独的样式表来定义一个背景元素，每个元素具有不同的文件。
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
See: http://css-tricks.com/resolution-specific-stylesheets/
请参阅：http: //css-tricks.com/resolution-specific-stylesheets/
or the W3C CSS media query spec.
回答by Joel Crawford-Smith
This is an excellent post on two methods to achieve this look:
这是一篇关于实现这种外观的两种方法的优秀文章：
回答by Kasturi
I do not know how to achieve this by setting it as a background image. However you could have a image that is absolutely positioned
我不知道如何通过将其设置为背景图像来实现这一点。但是，您可以拥有绝对定位的图像
<div style="position:absolute; left:0;right:0;bottom:0;top:0;display:table;vertical-align:middle;text-align:center">
<img style="max-width:100%; max-height:100%" />
</div>
回答by Davor Lucic
You could use CSS3 background-sizeproperty, but i am not sure how well it is supported. I think most of them do but with prefix:
您可以使用CSS3background-size属性，但我不确定它的支持程度。我认为他们中的大多数人都这样做，但带有前缀：
-o-background-size
-webkit-background-size
-khtml-background-size
