CSS 背景适合各种分辨率
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20056400/
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 Background fit every resolution
提问by Benjamin Jones
Ok, so I am a newbie. I want my background (which is a image), to fit every resolution of the Web Browser no matter the browser resolution. I found this trick:
好的，所以我是新手。无论浏览器分辨率如何，我都希望我的背景（这是一个图像）适合 Web 浏览器的每个分辨率。我发现了这个技巧：
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
BUT all it does is fits the background to the full size of the display, not the browser.So if the display is 1366x768 and the browser is maximized, then the background is properly showing as "full". However if I then adjust the browser , the background image is not showing correctly.
但它所做的只是让背景适合显示器的全尺寸，而不是浏览器。因此，如果显示为 1366x768 并且浏览器最大化，则背景正确显示为“完整”。但是，如果我随后调整浏览器，背景图像显示不正确。
So what do I need to do, so the background image is adjusted with the browser? So if the browser is 1300x700, the background image is 1300x700 but if the browser is 900x600 then the backgroud image is 900x600. Again, Im a newbie so please provide some examples.
那我需要怎么做，才能用浏览器调整背景图呢？因此，如果浏览器为 1300x700，背景图像为 1300x700，但如果浏览器为 900x600，则背景图像为 900x600。同样，我是新手，所以请提供一些示例。
回答by itsazzad
coverThis keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
cover该关键字指定背景图片应该被缩放到尽可能小，同时确保其尺寸大于或等于背景定位区域的相应尺寸。
containThis keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area. So try using contain instead of cover
contains该关键字指定背景图片应该被缩放到尽可能大，同时确保其尺寸小于或等于背景定位区域的相应尺寸。所以尝试使用包含而不是封面
100%This will scale 100% to both of height and width without any cropping.
100%这将 100% 缩放到高度和宽度，而不进行任何裁剪。
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
This may help you: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
这可能对您有所帮助：http: //www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain
And this https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
而这个https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
回答by Alex K
You can actually work around this by inserting the background image you want with height and width attributes on it and setting 100% width on it. Then you can place your content on top of that image.
您实际上可以通过插入具有高度和宽度属性的背景图像并在其上设置 100% 宽度来解决此问题。然后您可以将您的内容放在该图像之上。
<div class="container">
<img class="background-image" src="whatever.png" width="NATURAL WIDTH" height="NATURAL HEIGHT">
<div class="content">
This stuff will be on top of the image.
</div>
</div>
<style>
/* This element will == the height of the image */
.container {
position: relative;
}
/* This element is the background image */
.background-image {
width: 100%;
height: auto;
position: static;
}
/* This element contains the content which will be placed on top of the background image */
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
</style>
