让图片真正自适应的jQuery插件：ResponsifyJS

一个jquery插曲件让图片能够真正自适应，不会牺牲图像的主要部分。

Use this interactive web app to generate the focus area data http://responsifyjs.space/app/
```
<img src="image.png" alt=""     data-focus-left=".30" data-focus-top=".12" data-focus-right=".79" data-focus-bottom=".66" />
```
data-focus-leftis the focus area's left position comparing to the image's full width, in decimal. For example, if the full width is 300px, the focus area's left is 90, then thedata-focus-leftshould be 90/300 =0.3. Same logic applies to other three data attributes.
Embed the responsify.js in the html
```
<script src="responsify.js"></script>
```

Call responsify function when window object is loaded

$(window).load(function() {      $('img').responsify();    });

Call responsify function again when the window is being resized (optional)
```
$(window).resize(function(){      $('img').responsify();    })
```

本文由用户 cncde 自行上传分享，仅供网友学习交流。所有权归原作者，若您的权利被侵害，请联系管理员。

转载本站原创文章，请注明出处，并保留原始链接、图片水印。

本站是一个以用户分享为主的开源技术平台，欢迎各类分享！