用于修改图片大小并保持长宽比的jQuery插件（Tony原创）_H5之家

最近站长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地址：

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 (524)