根据屏幕分辨率显示自定义背景图像
Posted
技术标签:
【中文标题】根据屏幕分辨率显示自定义背景图像【英文标题】：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 完成）。
有关媒体查询的一些信息，请参见此处http://webdesignerwall.com/tutorials/css3-media-queries
【讨论】：
我不想每次调整浏览器大小时都加载不同的图像，我可能会在页面加载开始时使用 window 然后选择另一个。以上是关于根据屏幕分辨率显示自定义背景图像的主要内容，如果未能解决你的问题，请参考以下文章