根据屏幕分辨率显示自定义背景图像答案

【问题标题】：Displaying custom background images based on screen resolution根据屏幕分辨率显示自定义背景图像
【发布时间】：2012-08-31 17:33:15
【问题描述】：

对于一个网站，我需要能够根据用户的屏幕分辨率动态显示背景图片。

即当页面开始加载时，在<head> 中加载一个小的javascript，它通过css 将页面的背景设置为http://example.com/backgrounds/beach_800x600，其中800 和600 是通过javascript 确定的屏幕分辨率。

我正在为最常见的屏幕分辨率创建各种调整大小的图像，以便大多数人的屏幕分辨率与现有图像完全匹配。如果没有完全匹配，例如，如果用户的屏幕分辨率为AxB，但没有现有图像，则将动态创建图像并将其大小调整为AxB，并提供服务。从那时起，分辨率为AxB 的任何人都将获得该图像。

我的问题是：

1) 这是一种安全的方法吗？即我不希望为自定义屏幕分辨率创建超过 50 个自定义大小的图像。我可以用这种方法留在那个球场吗？使用这种方法还有其他我应该注意的安全风险吗？

2) 我应该给它一个 50 或 100 像素的误差范围，所以如果有人的分辨率是 700x900，而我没有，但我有 600x800 或者我有 800x1000，那么我会提供那些现有的图像而不是而不是创造新的？如果是这样，我应该将边距设置为 100 像素还是有更好的数字？

【问题讨论】：

【解决方案1】：

通过使用 CSS3 媒体查询和 background-size 属性，除了与过时的浏览器兼容之外，几乎不需要 JS。

Here's a link 以及有关background-size 的详细信息。此属性允许您以各种方式缩放图像，而不管用户分辨率如何。有时这可能并不理想。

And so we have CSS3 Media Queries。有了这些，您可以针对某些分辨率（或大于和小于某些分辨率）并告诉浏览器您想相应地显示哪个图像（或者甚至如何显示它，无论是否使用background-size）。

【讨论】：

通过背景尺寸缩放图像会导致它看起来失真，是吗？对于媒体查询，问题仍然是我需要为最常见的分辨率调整大小，但如果用户的分辨率不在其中，那么我想动态地为它创建一个调整大小的图像
background-size 确实会导致图像失真。但是，假设您创建了 3 个背景图像；一种用于 800x600，一种用于 1024x768，一种用于大于 1024x768 的任何尺寸。如果您要根据媒体查询将background-size:cover 设置为每个相应的背景图像，则可以避免该问题。您的媒体查询应分别类似于：max-width: 800px、max-width: 1024px 和 min-width: 1025px。
@ClickUpvote 这并不能保证访问者会看到整个背景，因为仍然会出现一些样式，但我相信这是一个愉快的折衷方案，也是可行的方案。跨度>

【解决方案2】：

您可能不想为每个屏幕分辨率创建一个图像，并且您可能希望根据浏览器窗口大小而不是屏幕分辨率来创建图像。鉴于窗口几乎可以是任何大小，您可能需要重新考虑这一点。

这也可以使用 CSS3 媒体选择器轻松完成，而不是 JavaScript（尽管也可以使用 JavaScript 完成）。

【讨论】：