CSS 调整背景图像的大小总是与中心点成比例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18323994/
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
Resizing background-image always proportionally to scale with a center point
提问by Sam Bellerose
I want to be able to reproduce the behavior of this website's image when resizing.
我希望能够在调整大小时重现该网站图像的行为。
It seems like the background-image has a center point where the image start to crop when it cannot keep its proportion scale.
似乎背景图像有一个中心点，当图像无法保持其比例比例时，图像开始裁剪。
Here is an example:
下面是一个例子：
http://themes.evgenyfireform.com/wp-jad/
http://themes.evgenyfireform.com/wp-jad/
For now my background has the following css:
现在我的背景有以下 css：
#bg {
position: fixed;
top: 0;
left: 0px;
width:100%;
}
The problem is that it's fixed and I want it to crop when the image can't be scale.
问题是它是固定的，我希望它在图像无法缩放时进行裁剪。
回答by Niels Keurentjes
You are looking for this combination:
您正在寻找这种组合：
background-position:50% 50%; /* Sets reference point to scale from */
background-size:cover; /* Sets background image to cover entire element */
Note that this is not supported by IE8and will require JS hackery there if you need IE8 or older to be supported.
请注意，这不受 IE8 支持，如果您需要支持 IE8 或更早版本，则需要 JS 黑客。
