/* * 图片裁剪 * imgdom:图片dom对象 也可以传this * cutimgtype(裁剪当时): 居中裁剪autocut 按比例缩放scaling 拉伸stretching * cutimgparent: 父类选择器 例如div标签的id是mydiv 那么这里就填 #mydiv * * 例如: * cutimg(this,"autocut","#mydiv") //传父标签 * cutimg(this,"autocut") //不传父标签 */ function cutimg(imgdom,cutimgtype,cutimgparent){ $(imgdom).each(function(){ var $this=$(imgdom); $this.css("csstext",""); var objheight,objwidth; //ie7+浏览器都能兼容的函数封装:获取图片的原始尺寸 if($this[0].naturalwidth && $this[0].naturalheight) { objwidth = $this[0].naturalwidth; objheight = $this[0].naturalheight; } else { var img = new image(); img.src = $this[0].src; objwidth = img.width; objheight = img.height; } var parentheight,parentwidth; if (cutimgparent!=undefined){ parentheight=$this.parents(cutimgparent).eq(0).height();//图片父容器高度 parentwidth=$this.parents(cutimgparent).eq(0).width();//图片父容器宽度 }else{ if($this.parent().prop('tagname')=='a' || $this.parent().prop('tagname')=='a'){ parentheight=$this.parent().parent().height();//图片父容器高度 parentwidth=$this.parent().parent().width();//图片父容器宽度 }else{ parentheight=$this.parent().height();//图片父容器高度 parentwidth=$this.parent().width();//图片父容器宽度 } } var imgcsstext = ""; if(cutimgtype == "autocut"){ var ratio=objheight/objwidth; if(objheight > objwidth) {//赋值宽高 if(parentwidth*ratio < parentheight){ imgcsstext = "width:"+parentheight/ratio+"px!important;height:"+parentheight+"px!important;"; }else{ imgcsstext = "width:"+parentwidth+"px!important;height:"+parentwidth*ratio+"px!important;"; } $this.css("csstext",imgcsstext); } else if(objheightparentwidth) {//赋值宽高 imgcsstext = "width:"+parentheight+"px!important;height:"+parentheight+"px!important;"; $this.css("csstext",imgcsstext); }else{ imgcsstext = "width:"+parentwidth+"px!important;height:"+parentwidth+"px!important;"; $this.css("csstext",imgcsstext); } } /* objheight=$this[0].height;//重新获取宽高 objwidth=$this[0].width;*/ objheight = $this.css("height").replace("px",""); objwidth = $this.css("width").replace("px",""); if(objheight>objwidth) { if(objheight == parentheight) { imgcsstext = $this.attr("style")+";margin-left:"+(parentwidth-objwidth)/2+"px!important;border:0px!important;"; }else{ imgcsstext = $this.attr("style")+";margin-top:"+(parentheight-objheight)/2+"px!important;border:0px!important;"; } $this.css("csstext",imgcsstext); }else if(objheight= parentwidth) { imgcsstext = $this.attr("style")+";margin-left:"+(parentwidth-objwidth)/2+"px!important;border:0px!important;" $this.css("csstext",imgcsstext); }else{ imgcsstext = $this.attr("style")+";margin-top:"+(parentheight-objheight)/2+"px!important;border:0px!important;"; $this.css("csstext",imgcsstext); } } }else{ try { var widthrate = objwidth / parentwidth; var heightrate = objheight / parentheight; var imgwidth = 0; var imgheight = 0; if(widthrate > 1 || heightrate > 1 || widthrate < 1 || heightrate < 1) { if(cutimgtype == "scaling")//按比例缩放 { var rate = math.max(widthrate, heightrate); imgwidth = math.max(1, math.min(objwidth/rate, parentwidth)); imgheight = math.max(1, math.min(objheight/rate, parentheight)); } else//拉伸 { imgwidth = parentwidth; imgheight = parentheight; } } else //大小合适 { imgwidth = parentwidth; imgheight = parentheight; } imgcsstext += "width:"+imgwidth+"px!important;height:"+imgheight+"px!important;"; $this.css("csstext",imgcsstext); if(imgwidth>imgheight) { if(imgwidth != parentwidth){ imgcsstext = $this.attr("style")+";margin-left:"+(parentwidth-imgwidth)/2+"px!important;border:0px!important;"; }else{ imgcsstext = $this.attr("style")+";margin-top:"+(parentheight-imgheight)/2+"px!important;border:0px!important;"; } $this.css("csstext",imgcsstext); } else { if(imgheight != parentheight){ imgcsstext = $this.attr("style")+";margin-top:"+(parentheight-imgheight)/2+"px!important;border:0px!important;"; }else{ imgcsstext = $this.attr("style")+";margin-left:"+(parentwidth-imgwidth)/2+"px!important;border:0px!important;"; } $this.css("csstext",imgcsstext); } } catch(e) { } } }) }