html5 原图生成缩略图,jQuery响应式按比例生成图片缩略图插件

jqthumb是一款实用的响应式按比例生成图片缩略图的jQuery插件。jqthumb可以按照用户设定的比例、尺寸、位置等属性来生成新的缩略图，在老的浏览器中它还能够替代background-size属性。jqthumb兼容性超强，可以工作在所有现代浏览器甚至是IE6+上，jQuery 1.3以上版本即可运行。它还可以在Zepto(通过zepto-data插件)v1.1.3+上运行。

这个jquery插件可以帮助我们按比例生成图片缩略图。大家可能知道在处理缩略图的时候使用 background-size: cover; 可以解决许多棘手问题。但是 background-size: cover; 在IE6、IE7和IE8下不能正常工作。而该插件正是弥补了这个缺陷。

使用方法

使用以下的简单html结构：

Kill

Kill All

在页面中引入jQuery和jqthumb.min.js文件：

然后按下面方法调用插件：

$(function(){

// plugin initialization

$('img').jqthumb({

classname : 'jqthumb', // class name. DEFUALT IS jqthumb

width : '100%', // new image width after cropping. DEFAULT IS 100px.

height : '100%', // new image height after cropping. DEFAULT IS 100px.

position : {

x : '50%', // x position of the image. DEFAULT is 50%. 50% also means centerize the image.

y : '50%' // y position of the image. DEFAULT is 50%. 50% also means centerize the image.

},

source : 'src', // to specify the image source attribute. DEFAULT IS src.

show : false,