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

最新推荐文章于 2026-06-17 09:00:18 发布

转载最新推荐文章于 2026-06-17 09:00:18 发布 · 676 阅读

收录于

Jquery

本文介绍了一个基于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 //设置图片最大高度
});

标签

#jquery #图片 #插件