css3 - 网页上的img引用的图片如何适配retina屏幕呢？

Question

如果是CSS里的，可以用下面的代码适配，但是如果是的又该怎么适配呢？

@media 
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min-device-pixel-ratio: 2) {

}

Answer 1

1. Retina.js，会造成两次图像的请求。

http://retinajs.com/

2. JS替换SRC的方法，会造成两次图像的请求。

2.1 自定义一种属性

<img src="/imgs/a.png" src="/imgs/a@2x.png">
<!--相对简单，使用jQuery.data("src")就可以取到-->
<img src="/imgs/a.png" src='{"retina":"/imgs/a@2x.png"}'>
<!--比较复杂，jQuery会自动按JSON的方式读取，这个扩展性更佳，还可以根据1.5倍屏幕给出相应的图片地址，或者针对IE6给出PNG16的兼容图片地址-->

2.2 使用某种方式匹配相应的标签

jQuery("img[src]")//效率在有些浏览器中很低
jQuery("img.rep-src") //需要在HTML中写入更多属性，这里是定义CSS类"rep-src"，维护相对麻烦

2.3 针对相应的屏幕做SRC的替换。

if ( window.devicePixelRatio && window.devicePixelRatio > 1 ) {
    jQuery(this).attr( "src" , jQuery(this).data("src") ) ;
    //如果自定义的属性是JSON式的，则会这样写：
    //jQuery(this).attr( "src" , jQuery(this).data("src")["retina"] ) ;
} //当然实际应用肯定不能写得这么草率，各种情形下的判断要加上。

3.等待新标准……

扩展阅读：

http://ued.taobao.com/blog/2013/01/css-and-html5-adaptive-images/

http://www.zhangxinxu.com/wordpress/2012/10/new-pad-retina-devicepixelratio-css-page/

Answer 2

我有一个不完美的，抛砖引玉
没有测试过，随口回答，只想表达我的思想

@media 
only screen and (-webkit-min-device-pixel-ratio: 2),  
only screen and (min-device-pixel-ratio: 2) {  
    img .retina_style {display:block;}  
    img .no_retina{display:none;}  
}  

Answer 3

楼主有什么好的方案了吗？

对于不支持srcset的浏览器，

最近在搞页面活动也碰到这样的问题。

暂时用js完成任务的