CSS CSS3 是否为“背景”提供“最小尺寸”属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10682765/
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
Does CSS3 offer a "minimum-size" property for "background"?
提问by francisMi
I'm using
我正在使用
background-size: 100%;
To fit my background image (in the body-tag) to the browser window.
使我的背景图像（在 body-tag 中）适合浏览器窗口。
But is there a CSS3 background-property to set a minimum-size?
但是是否有 CSS3 背景属性来设置最小尺寸？
Or will I need some div-"trick" like:
或者我是否需要一些 div-“技巧”，例如：
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
#bg {
position:fixed;
top:-50%;
left:-50%;
width:200%;
height:200%;
}
#bg img {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
min-width:50%;
min-height:50%;
}
回答by Raab
I think you are looking for
我想你正在寻找
background-size: contain;
OR
或者
background-size: cover;
The difference being that coverspecifies that the background image should be as small as possible while maintaining its aspect ratio. containon the other hand specifies that the background image should be as large as possible.
不同之处在于cover指定背景图像应尽可能小，同时保持其纵横比。contain另一方面指定背景图像应尽可能大。
See the MDN documentation here.
请参阅此处的 MDN 文档。
回答by Martin Zvarík
How about adding this:
添加这个怎么样：
@media screen and (max-width:700px){
#bg img { width: 500px; /* fixed width under 700px */ }
}
