在不同的分辨率下使用其他图片

Question

我正在制作一个网站，但我遇到了问题。我在屏幕的整个宽度上制作了一个滑块，但是我希望将小图片用于小分辨率，对于大分辨率则使用更大的图片。我的滑块中的图像是用html编写的。这是可能的，我该怎么做？

这是我的网站：http://www.yannickluijten.be

Answer 1

您应该调查CSS媒体查询。它们允许您根据浏览器的属性（包括窗口大小）设置特定的样式（或导入不同的样式表）。

http://www.w3.org/TR/css3-mediaqueries/

Answer 2

从你的最新评论，我建议以下解决方案。

要么使用媒体查询像其他答案（虽然这仅仅是由CSS3支持）或：

我可能会使用JavaScript。检测用户屏幕分辨率，然后根据屏幕分辨率将src插入图像标签。您可以将分辨率范围的地图保留为img srcs。

Answer 3

我的建议是去掉愚蠢的img标签，而使用div与背景图片。但如果你是坚定的关于使用img标签我想你可以保存你的图像是这样的：

 
./ 
|-- some_image_1024x500.png 
|-- some_image_512x250.png 
|-- another_image_1024x500.png 
|-- another_image_512x250.png 
|-- third_image_1024x500.png 
|-- third_image_512x250.png 
|-- ... 

然后添加该应根据窗口大小改变图像分辨率图像标记一类特殊的，比如<img class="width-sensitive" src="images/some_image_1024x500.png" />

然后写一个JavaScript函数来检查窗口的大小和执行图像源替换，例如（伪代码使用jQuery）：

// This function is terribly unDRY and ugly but it's just an example 
function process_image_sizes() { 
    var images = $('img.width-sensitive'); 

    if($(window).width() > 800) { 
     images.each(function(index, element) { 
      var src = $(element).prop('src'); 
      if(/512x250\.png$/.test(src)) { 
       $(element).prop('src', src.replace('512x250', '1024x500')); 
      } 
     } 
    } 
    else { 
     images.each(function(index, element) { 
      var src = $(element).prop('src'); 
      if(/1024x500\.png$/.test(src)) { 
       $(element).prop('src', src.replace('1024x512', '512x250')); 
      } 
     } 
    } 
} 

然后在页面加载运行功能一次：

$(function() { process_image_sizes(); }); 

每当调整窗口大小：

$(window).on('resize', process_image_sizes); 

我希望这是一些帮助。

---

编辑：只是作为一种事后，你大概要开始默认的小图像，然后切换到在调整尺寸较大的图像。我仍然建议只使用CSS。