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

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

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

我正在为最常见的屏幕分辨率创建各种调整大小的图像，因此对于大多数人来说，它们的屏幕分辨率与现有图像完全匹配。如果没有完全匹配，例如，如果用户的屏幕分辨率为AxB，并且没有现有图像，则将创建一个图像&即时调整为AxB，并将投放。从那时起，任何人都将得到该图像的分辨率AxB。

我有的问题是：

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

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

来源

2012-08-31 Click Upvote

通过使用CSS3媒体查询和background-size财产，有几乎不需要JS不是为了兼容使用过时的浏览器等。

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

And so we have CSS3 Media Queries。有了这些，您可以将某些分辨率（或大于和小于某些分辨率）作为目标，并告知浏览器您希望显示哪个图像（或甚至如何显示它，无论是否带有background-size）。

来源

2012-08-31 17:38:21

通过背景大小缩放图像会导致图像看起来扭曲，是吗？对于媒体查询，问题仍然是我需要调整最常见的分辨率，但如果用户的分辨率不在其中，那么我想为其创建一个已调整大小的图像 –

'background-size'可以导致图像变形，当然。但是，让我们假装您创建3个背景图像;一个用于800x600，一个用于1024x768，另一个用于大于1024x768的任何内容。如果您要根据媒体查询为每个背景图像设置“background-size：cover”，则可以避免该问题。您的媒体查询应该分别类似：max-width：800px，max-width：1024px和min-width：1025px。 –

@ClickUpvote这并不能保证访问者会看到整个背景，因为一些样式仍然会出现，但我相信这是一个令人愉快的妥协，并且这是一个可行的方案。 –

您可能不想为每个屏幕分辨率创建图像，并且您可能希望将其基于浏览器窗口大小而不是屏幕分辨率。鉴于一个窗口几乎可以是任何大小的，您可能需要重新考虑这一点。此外，这可以使用CSS3媒体选择器而不是JavaScript（尽管也可以使用JavaScript来完成）轻松完成。

看到这里的一些信息，有关媒体查询http://webdesignerwall.com/tutorials/css3-media-queries

来源

2012-08-31 17:37:07 Brendan

我不想在每次浏览器调整大小时加载不同的图像，我可能会在页面加载开始时使用窗口，然后选择另一个。 –

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

回答

相关问题