根據屏幕分辨率顯示自定義背景圖片

對於一個網站，我需要能夠根據用戶的屏幕分辨率動態顯示背景圖片。根據屏幕分辨率顯示自定義背景圖片

即，當頁面開始加載時，在<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

我不想在每次瀏覽器調整大小時加載不同的圖像，我可能會在頁面加載開始時使用窗口，然後選擇另一個。 –

根據屏幕分辨率顯示自定義背景圖片

回答

相關問題