/* * * 【jQuery插件】图片垂直水平缩放显示 * */ (function($){ $.fn.VMiddleImg = function(options) { var defaults={ "width":null, "height":null }; var opts = $.extend({},defaults,options); return $(this).each(function() { var $this = $(this); var objHeight = $this.height(); //图片高度 var objWidth = $this.width(); //图片宽度 var parentHeight = opts.height||$this.parent().height(); //图片父容器高度 var parentWidth = opts.width||$this.parent().width(); //图片父容器宽度 var ratio = objHeight / objWidth; if (objHeight > parentHeight && objWidth > parentWidth) { if (objHeight > objWidth) { //赋值宽高 $this.width(parentWidth); $this.height(parentWidth * ratio); } else { $this.height(parentHeight); $this.width(parentHeight / ratio); } objHeight = $this.height(); //重新获取宽高 objWidth = $this.width(); if (objHeight > objWidth) { $this.css("top", (parentHeight - objHeight) / 2); //定义top属性 } else { //定义left属性 $this.css("left", (parentWidth - objWidth) / 2); } } else { if (objWidth > parentWidth) { $this.css("left", (parentWidth - objWidth) / 2); } $this.css("top", (parentHeight - objHeight) / 2); } }); }; })(jQuery);