日期：2012-8-31 来源：GBin1.com
在线演示 本地下载
响应式的网站设计中，很重要的一个部分就是图片的响应式设计，今天我们将介绍一个超棒的帮助你生成响应式图片设计的jQuery插件 - jQuery picture。使用它能够帮助你快速的生成支持响应式设计的图片。
主要特性
- 插件非常小，压缩版2kb
- 支持figure标签及其新加入的picture标签
- 支持主流浏览器
- 使用方便
如何使用
初始化js插件：
$(function(){$('figure, picture').picture();});HTML：<figure data-media="http://placehold.it/370x185" data-media440="http://placehold.it/440x220" data-media600="http://placehold.it/600x300" title="A Half Brained Idea"><a href="http://www.gbin1.com"><noscript><img src="http://placehold.it/600x300" alt="gbin1 demo"></noscript></a></figure>
大家可以看到以上代码中，我们设定了media query的对应值，这里我们使用html5的data属性设定不同宽度的显示图片。
另外这个插件还支持picture标签，这个标签还不是合法的html标签。
HTML：
<picture alt="A Half Brained Idea"><source src="assets/images/small.png"><source src="assets/images/medium.png" media="(min-width:440px)"><source src="assets/images/large.png" media="(min-width:600px)"><noscript><img src="assets/images/large.png" alt="A Half Brained Idea"></noscript> </picture>
同样调用js，如下：
........
来源：超棒的jQuery响应式图片处理插件：jQuery picture