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

cncde 9年前

一个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();    })
```