css - 仅当分辨率超过图像大小时才调整背景图像大小

Question

所以我找到了一个根据浏览器的纵横比调整网站背景图像大小的教程。这可行，但我只希望它在浏览器的分辨率如此之高以至于它不适合的情况下裁剪和调整图像大小。

它用

background-size: cover;

这可以解决问题，但我只希望它在大于原始大小时更改大小。换句话说：我只希望它使背景更大，而不是更小。

任何帮助将不胜感激，谢谢！

Answer 1

你想修复背景的大小你可以使用它。

page{
       with:960px;
        margin-left:auto;
        margin-right:auto;
        background:black;

        }

Answer 2

如果您知道背景图像的宽度，则可以使用媒体查询来实现您想要的。

例如，假设您的背景图像是 900px 宽：

body {
    background: url('/img/background.jpg') no-repeat left top;
}

@media screen and (min-width: 900px) {
    body {
        background-size: cover;     
    }
}   

这将为 900 像素及以上的屏幕尺寸设置 background-size:cover 属性，但将为较小的屏幕保留原始尺寸。

哪些浏览器支持媒体查询的参考： http: //caniuse.com/css-mediaqueries