jQuery图片居中裁切效果 ? 啄米鸟的blog

123456789101112131415161718192021222324252627282930313233343536373839404142

//调用$(function(){	zmnImgCenter($(".t-img"));//JQ的dom	});//图片居中function zmnImgCenter(obj){	obj.each(function(){			var $this=$(this);			var objHeight=$this.height();//图片高度			var objWidth=$this.width();//图片宽度			var parentHeight=$this.parent().height();//图片父容器高度			var parentWidth=$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){//当图片宽大于容器宽，小于时利用css text-align属性居中					$(this).css("left",(parentWidth-objWidth)/2);					}				$(this).css("top",(parentHeight-objHeight)/2);				}		})	}