响应式设计是指页面可以自动响应用户的设备环境，可自动调整分辨率、图片尺寸及相关功能等，今天就给大家推荐一个响应式图片显示效果插件 - jQuery Picture。

jQuery Picture 是一个非常容易使用的轻量级 jQuery 插件，它可用于实现响应式的图片显示效果。它是基于 HTML5 的，可将 figure 和 picture 标签中的图片设置为响应式图片。使用方法也很简单，只需在标签中设置好图片，再初始化 JS 就可以了。

如何使用

首先添加 jQuery 框架和 jQuery Picture 插件     

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-picture.js"></script>

<figure data-media="small.jpg" data-media300="300.jpg" data-media440="440.jpg" data-media600="600.jpg"  data-media800="800.jpg" >
  <noscript>
     <img src="large.jpg" >
  </noscript>
</figure>

//初始化
  $(document).ready(function(){
      $('figure').picture();
  
  })

说明：

在figure标签中用到了html5的data属性，插件根据图片外围容器的宽度加载不同的图片：

data-media：宽度小于300px时，加载small.jpg

data-media300: 宽度大于300px 且 小于 440px时 加载300.jpg

data-media440: 宽度大于440px 且 小于 600px时 加载440.jpg

data-media600: 宽度大于600px 且 小于 800px时 加载600.jpg

data-media800: 宽度大于800px 时 加载800.jpg