博客园  :: 联系 :: 管理

jQuery图片居中裁切效果

Posted on 2012-01-31 18:45  独孤雁  阅读(1356)  评论(0)  编辑  收藏  举报

转自“http://www.css88.com/demo/VMiddleImg/#”

大家在做相册列表的时候可能会遇到这样的情况，用户上传的图片大小不一，长宽不一，然而需求的列表却是固定宽高的如图：

此脚本拟达到以下需求
1.当图片高或宽超过父容器时截取中间部分显示。
2.当图片宽高小于父容器时，居中显示。
查看demo:http://blog.dmtuan.com/demo/zmnImgCenter/demo.html

初次写脚本，请尽量拍砖。

脚本：

?[Copy to clipboard]View Code JAVASCRIPT
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

//调用
$(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);
				}
		})
	}