背景图片在不同分辨率下调整大小/加载大小为

所以我使用超大号来扩展我的背景图片，这一切都很好。问题是，如果我希望图像在多个分辨率下看起来不错，它应该很大，例如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

背景图片在不同分辨率下调整大小/加载大小为

回答

相关问题