https://www.cug.edu.cn/system/resource/js/centerCutImg.js

1/*
2*  图片裁剪
3*  imgdom：图片dom对象 也可以传this
4*  cutImgType(裁剪当时): 居中裁剪autocut  按比例缩放Scaling  拉伸stretching
5*  cutImgParent: 父类选择器 例如div标签的id是mydiv  那么这里就填 #mydiv
6*
7*  例如：
8*  cutImg(this,"autocut","#mydiv")  //传父标签
9*  cutImg(this,"autocut")  //不传父标签
10*/
11function cutImg(imgdom,CutImgType,cutImgParent){
12    $(imgdom).each(function(){
13        var $this=$(imgdom);
14
15	    $this.css("cssText","");
16
17        var objHeight,objWidth;
18        //IE7+浏览器都能兼容的函数封装:获取图片的原始尺寸
19        if($this[0].naturalWidth && $this[0].naturalHeight) {
20            objWidth = $this[0].naturalWidth;
21            objHeight = $this[0].naturalHeight;
22        } else {
23            var img = new Image();
24            img.src = $this[0].src;
25            objWidth = img.width;
26            objHeight = img.height;
27        }
28
29        var parentHeight,parentWidth;
30        if (cutImgParent!=undefined){
31            parentHeight=$this.parents(cutImgParent).eq(0).height();//图片父容器高度
32            parentWidth=$this.parents(cutImgParent).eq(0).width();//图片父容器宽度
33        }else{
34            if($this.parent().prop('tagName')=='a' || $this.parent().prop('tagName')=='A'){
35                parentHeight=$this.parent().parent().height();//图片父容器高度
36                parentWidth=$this.parent().parent().width();//图片父容器宽度
37            }else{
38                parentHeight=$this.parent().height();//图片父容器高度
39                parentWidth=$this.parent().width();//图片父容器宽度
40            }
41        }
42
43        var imgCssText = "";
44
45		if(CutImgType == "autocut"){
46			var ratio=objHeight/objWidth;
47			if(objHeight > objWidth) {//赋值宽高
48                if(parentWidth*ratio < parentHeight){
49                    imgCssText = "width:"+parentHeight/ratio+"px!important;height:"+parentHeight+"px!important;";
50                }else{
51                    imgCssText = "width:"+parentWidth+"px!important;height:"+parentWidth*ratio+"px!important;";
52                }
53                $this.css("cssText",imgCssText);
54			}
55			else if(objHeight<objWidth) {
56                if(parentHeight/ratio < parentWidth){
57                    imgCssText = "width:"+parentWidth+"px!important;height:"+parentWidth*ratio+"px!important;";
58                }else{
59                    imgCssText = "width:"+parentHeight/ratio+"px!important;height:"+parentHeight+"px!important;";
60                }
61                $this.css("cssText",imgCssText);
62            }else{
63                if(parentHeight>parentWidth) {//赋值宽高
64                    imgCssText = "width:"+parentHeight+"px!important;height:"+parentHeight+"px!important;";
65                    $this.css("cssText",imgCssText);
66                }else{
67                    imgCssText = "width:"+parentWidth+"px!important;height:"+parentWidth+"px!important;";
68                    $this.css("cssText",imgCssText);
69                }
70			}
71
72/*            objHeight=$this[0].height;//重新获取宽高
73            objWidth=$this[0].width;*/
74            objHeight = parseFloat($this.css("height").replace("px",""));
75            objWidth = parseFloat($this.css("width").replace("px",""));
76
77
78
79            if(objHeight>objWidth) {
80                if(objHeight == parentHeight) {
81                    imgCssText = $this.attr("style")+";margin-left:"+(parentWidth-objWidth)/2+"px!important;border:0px!important;float: none;";
82                }else{
83                    imgCssText = $this.attr("style")+";margin-top:"+(parentHeight-objHeight)/2+"px!important;border:0px!important;float: none;";
84                }
85                $this.css("cssText",imgCssText);
86            }else if(objHeight<objWidth) {
87                if(objWidth == parentWidth) {
88                    imgCssText = $this.attr("style")+";margin-top:"+(parentHeight-objHeight)/2+"px!important;border:0px!important;float: none;";
89                }else{
90                    imgCssText = $this.attr("style")+";margin-left:"+(parentWidth-objWidth)/2+"px!important;border:0px!important;float: none;";
91                }
92                $this.css("cssText",imgCssText);
93            }else{
94                if(parentHeight >= parentWidth) {
95                    imgCssText = $this.attr("style")+";margin-left:"+(parentWidth-objWidth)/2+"px!important;border:0px!important;float: none;"
96                    $this.css("cssText",imgCssText);
97                }else{
98                    imgCssText = $this.attr("style")+";margin-top:"+(parentHeight-objHeight)/2+"px!important;border:0px!important;float: none;";
99                    $this.css("cssText",imgCssText);
100                }
101            }
102
103        }else{
104            try
105            {
106                var widthrate = objWidth / parentWidth;
107                var heightrate = objHeight / parentHeight;
108                var imgwidth = 0;
109                var imgheight = 0;
110
111                if(widthrate > 1 || heightrate > 1 || widthrate < 1 || heightrate < 1)
112                {
113                    if(CutImgType == "Scaling")//按比例缩放
114                    {
115                        var rate = Math.max(widthrate, heightrate);
116                        imgwidth = Math.max(1, Math.min(objWidth/rate, parentWidth));
117                        imgheight = Math.max(1, Math.min(objHeight/rate, parentHeight));
118                    }
119                    else//拉伸
120                    {
121                        imgwidth = parentWidth;
122                        imgheight = parentHeight;
123                    }
124                }
125                else //大小合适
126                {
127                    imgwidth = parentWidth;
128                    imgheight = parentHeight;
129                }
130
131                imgCssText += "width:"+imgwidth+"px!important;height:"+imgheight+"px!important;";
132                $this.css("cssText",imgCssText);
133
134                if(imgwidth>imgheight) {
135                    if(imgwidth != parentWidth){
136                        imgCssText = $this.attr("style")+";margin-left:"+(parentWidth-imgwidth)/2+"px!important;border:0px!important;";
137                    }else{
138                        imgCssText = $this.attr("style")+";margin-top:"+(parentHeight-imgheight)/2+"px!important;border:0px!important;";
139                    }
140                    $this.css("cssText",imgCssText);
141                }
142                else
143                {
144                    if(imgheight != parentHeight){
145                        imgCssText = $this.attr("style")+";margin-top:"+(parentHeight-imgheight)/2+"px!important;border:0px!important;";
146                    }else{
147                        imgCssText = $this.attr("style")+";margin-left:"+(parentWidth-imgwidth)/2+"px!important;border:0px!important;";
148                    }
149                    $this.css("cssText",imgCssText);
150                }
151            }
152            catch(e)
153            {
154            }
155		}
156    })
157}
158