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

Posted 2023-03-06

【中文标题】根据分辨率自动调整背景图像大小

【英文标题】：Automatic background image resizing based on resolution

【发布时间】：2014-02-02 16:28:22

【问题描述】：

这就是问题所在：我想要一个 CSS 代码，让我能够自动调整网站背景的大小，仅基于所用电脑的分辨率。

这意味着，例如，如果用户调整浏览器窗口的大小，图像将不会调整大小（不像 .stretch 值，要清楚）。

【问题讨论】：

我不认为没有 javacript 你可以做到，但你可以计算 window.screen.width 和 window.screen.height

你不能，即使使用 javascript。我们在浏览器窗口领域工作，而不是系统规范。

@JacquesGoulet 嗯，你可以吗？ ***.com/questions/10022584/…

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

好吧，我也是这么想的，但显然你可以用它来检测它。显然浏览器可以检测到，否则@media 查询将不起作用，不是吗？

【参考方案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 */

有关更多信息，您可以查看此问答：

Responsive backgrounds with Twitter Bootstrap?

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

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

【参考方案2】：

这可能对你有帮助...

背景大小：包含；背景来源：内容框；

这将帮助您在正常屏幕大小中保持图像的原始大小，并根据 div 大小的变化调整大小。但我们必须保持高度为自动。否则它的高度会影响背景图片的大小。