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

Displaying custom background images based on screen resolution

本文关键字：自定义背景图像显示分辨率屏幕更新时间：2023-09-26

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

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

我正在为最常见的屏幕分辨率创建各种调整大小的图像，这样对于大多数人来说，他们的屏幕分辨率将与现有图像完全匹配。如果没有进行完全匹配，例如，如果用户具有没有现有图像的屏幕分辨率AxB，则将创建图像&动态调整大小为AxB，并将提供服务。从那时起，任何分辨率为AxB的人都将获得该图像。

我的问题是：

1）这是一种安全的方法吗？I.e我不希望为自定义屏幕分辨率创建超过50个自定义大小的图像。用这种方法我能呆在那个棒球场吗？这种方法还有其他安全风险吗？

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

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

这里有一个链接，其中包含有关background-size的详细信息。此属性允许您以各种方式缩放图像，而不考虑用户的分辨率。有时这可能并不理想。

因此我们有CSS3媒体查询。有了这些，您可以针对特定的分辨率（或高于和低于特定的分辨率），并告诉浏览器您希望相应地显示哪幅图像（甚至如何显示，无论是否使用background-size）。

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

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

有关媒体查询的一些信息，请参阅此处http://webdesignerwall.com/tutorials/css3-media-queries