背景图像尺寸/加载跨越不同的分辨率与超大

Question

所以我使用Supersized来缩放我的背景图像，这一切都很好。问题是，如果我希望图像在多种分辨率下看起来很好，它应该很大，例如2000 px * 2000 px。但是为什么要求分辨率为800 * 600需要下载如此大的图像吗？所以我想做的就是拥有3种尺寸的图像（1024 * n，1680 * n和2000 * n），并根据分辨率将最小可能的图像发送到用户。关于我应该如何实现这一点的任何想法？

Answer 1

使用Javascript的window.screen.width会返回屏幕的实际像素宽度，因此您可以使用简单的if语句来选择要使用的图像。

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

Answer 2

您可以使用$(window).width();（http://api.jquery.com/width/）确定用户窗口宽度，然后决定要使用哪个图像 -

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

Answer 3

很多方式：

1. 正如其他人所说，获取屏幕的宽度，然后根据它，操纵元素的背景图像源。
2. 使用Less在客户端创建程序化CSS
3. 使用responsive-images
的概念