背景圖片在不同分辨率下調整大小/加載大小爲

所以我使用超大號來擴展我的背景圖片，這一切都很好。問題是，如果我希望圖像在多個分辨率下看起來不錯，它應該很大，例如2000像素* 2000像素。但爲什麼應該有人解決了例如800 * 600需要下載這麼大的圖片？所以我想要做的就是讓圖像有三種尺寸（1024 * n，1680 * n和2000 * n），並且根據分辨率的不同，最小的可能會被髮送到用戶。有關我應該如何實施的想法？背景圖片在不同分辨率下調整大小/加載大小爲

來源

2011-07-12 Andrija

使用JavaScript的window.screen.width會返回屏幕的實際像素寬度，然後您可以使用簡單的if語句來選擇要使用的圖像。

if(window.screen.width < 1000) { 
    image = "small.jpg"; 
} else { 
    image = "large.jpg"; 
}

來源

2011-07-12 09:41:44 shanethehat

看起來不錯，稍後當我回家時會嘗試。 – Andrija

它很好用，謝謝:) – Andrija

可以使用$(window).width();（http://api.jquery.com/width/）來確定用戶的窗口的寬度，然後再決定你希望使用的圖像 -

$('#yourImageId').attr('src', 'images/alt/imagename.jpg');

來源

2011-07-12 09:36:27 kleinohad

的概念，這是否返回瀏覽器，而不是屏幕的寬度是多少？如果180P用戶在檢查完成後最大化他們的瀏覽器會怎麼樣？ – shanethehat

看看這個：http://stackoverflow.com/questions/1091540/how-to-get-screen-resolution-of-visitor-in-javascript-and-or-php – kleinohad

對不起，我不關注。我建議使用屏幕寬度而不是窗口的原因是因爲用戶可能擁有高分辨率屏幕，但沒有使其瀏覽器最大化。在這種情況下，你會提供一個低分辨率的圖像，如果用戶決定最大化他們的屏幕，這將看起來令人討厭。 'window.screen.width'返回實際的顯示器分辨率：http://www.javascriptkit.com/howto/newtech3.shtml – shanethehat

方法很多：

正如有人說，得到屏幕的寬度，再此基礎上，操縱元素的背景圖像源。
使用Less在客戶端程序創建CSS
使用的responsive-images

來源

2011-07-12 09:48:56

背景圖片在不同分辨率下調整大小/加載大小爲

回答

相關問題