简单jQuery图片自适应宽度插件jQuery.imgAutoSize.js
(function ($) { var loadImg = function (url, fn) { var img = new Image(); img.src = url; if (img.complete) { fn.call(img); } else { img.onload = function () { fn.call(img); img.onload = null; }; }; }; $.fn.imgAutoSize = function (padding) { var maxWidth = this.innerWidth() - (padding || 0); return this.find('img').each(function (i, img) { loadImg(this.src, function () { if (this.width > maxWidth) { var height = maxWidth / this.width * this.height, width = maxWidth; img.width = width; img.height = height; }; }); }); }; })(jQuery);
使用方法
jQuery(function ($) { // .imgWrap这个是图片外部容器,使用了本插件后超大的图片宽度将会限制在容器宽度 // 如果要控制图片与容器的边距,如20像素: $('.imgWrap').imgAutoSize(20); $('.imgWrap').imgAutoSize(); });