根据分辨率自动调整背景图片大小

Question

这是问题所在：我想要一段CSS代码，可以根据使用的电脑分辨率自动调整我的网站背景大小。

这意味着，例如，如果用户调整浏览器窗口大小，图像不会被调整大小（而不像.stretch值，需明确）。

- Onsyzygy

---

我认为你不能没有JavaScript完成它，但是你可以计算window.screen.width和window.screen.height。 - Vitim.us

即使使用JavaScript也无法做到。我们的工作范围是浏览器窗口，而不是系统规格。 - QuestionMarks

@JacquesGoulet，可以的。https://dev59.com/dGLVa4cB1Zd3GeqPvloW - brandonscript

@remus - 不，他说的是实际的显示器或设备屏幕尺寸，而不是浏览器分辨率。这是完全不同的事情，你无法在未访问密钥的情况下获取用户的监视器大小。这显然会带来一些漏洞问题。 - QuestionMarks

好吧，我也是这么想的，但显然你可以使用它来检测。很明显，否则 @media 查询就不起作用了，不是吗？ - brandonscript

不，媒体查询是基于浏览器分辨率而非设备屏幕尺寸的；除非你明确使用device-width参数...但这会变得混乱，因为你必须列出每个设备的显式宽度。 - QuestionMarks

Answer 1

这将使用CSS为您提供响应式背景：

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;
}

这将是一个只使用CSS的响应式图片。如果您想根据屏幕尺寸更改图像，请将声明放在媒体查询内部。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    /* Styles */
}

欲了解更多信息，请查看以下问答：

如何使用Twitter Bootstrap实现响应式背景？

如果您不需要响应式图片，请从html选择器中删除CSS3声明：

html { 
    background: url(images/bg.jpg) no-repeat center center fixed;
}

- robabby

Answer 2

这可能会有所帮助...

background-size:contain;background-origin:content-box;

这将帮助您在正常屏幕大小下保持图像的原始大小，并根据div大小的更改进行调整。但是我们必须将高度保持为自动。否则，其高度将影响背景图像的大小。

- user3373888