jQuery响应式图片显示插件 - jQuery Picture

本文参考：http://site518.net/jquery-picture-for-responsive-images/

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

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

如何使用

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

<script src="jquery.min.js"></script>
<script src="jquery-picture-min.js"></script>

之后在 figure 或 picture 标签中添加图片，如下

<figure data-media="small.jpg" data-media440="medium.jpg" data-media600="large.jpg" title="给力技术">
<a href="http://site518.net">
<img src="large.jpg" alt="给力技术">
</a>
</figure>

最后初始化就完成了

$('figure').picture();