李勇为您分享jQuery.imgAutoSize插件，解决图片自适应大小（以宽度）的问题，附图片垂直居中的方法。这里不用css处理图片自适应大小，那法子不太符合w3c标准，感兴趣的同学自行百度。
jQuery.imgAutoSize：图片自适应大小（以宽度）+图片垂直居中
jQuery.imgAutoSize：图片按宽度自适应大小
- (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);
QQ咨询
客服中心
客户案例