最近站长Tony开发了一个jquery.imgresize.js插件,这是一个用来修改图片大小并保持长宽比的jQuery插件,用于用户发布文章之后查看文章,如果用户的图片超过了我们容器的宽度不至于把样式搞乱,如果没有超过容器的宽度就保持原来的大小,兼容IE6、7、8浏览器。值得注意的是jquery版本要求是1.3到1.8,HTML声明请遵循W3C标准。
使用方法:
$('img').imgresize();
$('img').imgresize({width:600});
支持多张图片同时调整大小,例如选择器的元素有多张图片,让多张图片同时调整成等于或小于width的大小。没有填写width这个参数图片将保持原来的大小。
2013年9月25日优化了原来的代码,提高了插件的兼容性。
demo地址:http://www.tonitech.com/demo/jquery.imgresize.js
jquery.imgresize.js插件的代码如下:
// @charset "utf-8";
/**
* jquery版本要求:1.3 ~ 1.8,HTML声明请遵循W3C标准
* 用来修改图片大小并保持长宽比的jQuery插件
* 兼容IE6浏览器
* @author wangzhiangtony@qq.com
* @version 1.2
* @date 2013-9-25 14:46:49
*/
(function($) {
$.fn.imgresize = function(opts) {
var defaults = {
width : null
};
var options = $.extend(defaults, opts);
if(options.width != null) {
if($.browser.msie) {
$('img').each(function(index, element){
var src = $(element).attr('src');
$(element).load(function() {
iresize(this);
});
$(element).attr('src', src + '?' + new Date().getTime());
});
} else {
$('img').load(function() {
iresize(this);
});
}
}
function iresize(self) {
var width = $(self).width();
var height = $(self).height();
if(width > options.width) {
height = options.width * height / width;
$(self).css('width', options.width);
$(self).css('height', Math.round(height));
}
}
};
})(jQuery);
demo下载地址:
jquery.imgresize.js (564)