jquery图片尺寸调整插件图片垂直居中自适应容器

(function($) {
  $.fn.extend({
    resizeImg: function(opt, callback) { var defaults = { w: 200, h: 150 }, opts = $.extend(defaults, opt); //获取图片实际宽高,此方法摘自网络 var getImgWh = function(url, callback) { var width, height, intervalId, check, div, img = new Image(), body = document.body; img.src = url; //从缓存中读取 if (img.complete) { return callback(img.width, img.height); }; //通过占位提前获取图片头部数据 if (body) { div = document.createElement('div'); div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden'; div.appendChild(img) body.appendChild(div); width = img.offsetWidth; height = img.offsetHeight; check = function() { if (img.offsetWidth !== width || img.offsetHeight !== height) { clearInterval(intervalId); callback(img.offsetWidth, img.clientHeight); img.onload = null; div.innerHTML = ''; div.parentNode.removeChild(div); }; }; intervalId = setInterval(check, 150); }; // 加载完毕后方式获取 img.onload = function() { callback(img.width, img.height); img.onload = img.onerror = null; clearInterval(intervalId); body && img.parentNode.removeChild(img); }; }; this.each(function() { var _this = this; getImgWh(this.src, function(imgWidth, imgHeight) { //计算图片最大宽度 if (imgWidth > opts["w"]) { _this.width = opts["w"]; _this.height = imgHeight * (opts["w"] / imgWidth); imgWidth = opts["w"]; imgHeight = _this.height; } //计算图片最大高度 if (imgHeight > opts["h"]) { _this.height = opts["h"]; _this.width = imgWidth * (opts["h"] / imgHeight); imgHeight = opts["h"]; imgWidth = _this.width; } //水平居中,垂直居中 $(_this).css({ "margin-top": (opts["h"] - imgHeight) / 2, "margin-left": (opts["w"] - imgWidth) / 2 }); }); }); }
  });
})(jQuery); 
调用方法
$("ul li img").resizeImg({
    w:190, //设置图片最大宽度
    h:80 //设置图片最大高度
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值