css - CSS3 是否为“背景”提供“最小尺寸”属性？

Question

我正在使用

background-size: 100%;

使我的背景图像（在 body-tag 中）适合浏览器窗口。

但是是否有 CSS3 背景属性来设置最小尺寸？

还是我需要一些 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%;
}

Answer 1

我想你正在寻找

background-size: contain;

或者

background-size: cover;

不同之处在于cover指定背景图像应尽可能小，同时保持其纵横比。contain另一方面，指定背景图像应尽可能大。

请参阅此处的 MDN 文档。

Answer 2

添加这个怎么样：

@media screen and (max-width:700px){
    #bg img { width: 500px; /* fixed width under 700px */ }
}