当前位置 > 首页 > 个人随笔 > 用户上传头像，等比例缩放

用户上传头像，等比例缩放

2010年02月8日   作者： Artcss     类别：个人随笔

1315 views | 发表评论

分享到: 百度 QQ空间 微博 豆瓣 人人 开心 QQ书签

其实关于用户上传头像大小问题早就有了比较完美的解决办法，那就是再上传时通过裁切来实现。

最近做一个专题，用裁切有点大材小用，而且着急上线，就写了个简单js来满足头像自适应预留位置大小。

具体要求如下：

1、当用户上传的头像宽和高均小于指定大小（200X150）时，图片按实际大小显示，且水平垂直居中

2、当用户上传的头像宽或高大于指定大小（200X150）时，分两种情况：

  • 如果比3:4扁的话，则宽度缩为200，高度根据宽度自适应，且水平垂直居中。
  • 如果比3:4窄的话，则高度缩为150，宽度根据高度自适应，且水平垂直居中。
用到的javascript代码如下[jQuery版]：
Download script.js
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

$(document).ready(function() {
$("#tt a").click(function(){
	$("#tt a").removeClass("on");
	$(this).addClass("on");
	$(".userbox img").hide();
	var userPic = $("."+$(this).attr("id"));
	userPic.show();
	var url = userPic.attr("src");	//获取当前图片的ID
	$("#yuanshi").attr("src",url);
	$("#yuanshi").hide();
	$("#yuanshi").show("slow");
 
	var userW = userPic.width();
	var userH = userPic.height();
	var bool = false;
	if(userW<200 && userH<150 ){	//判断如果图片高宽均小于指定大小时的情况
		userW = userW;
		userH = userH;
		bool =true;
	}else{
		if(userH/userW < 3/4){
			userPic.css("width",200);
		}else{
			userPic.css("height",150);
		}
	}
	if(userH < 150){	//设置图片垂直居中
		var userTop;
		if(bool){
			userTop = (150 - userH)/2;
		}else{
			userH  = userH*200/userW;
			userTop = (150 - userH)/2;
		}
		userPic.css("margin-top",userTop);
	}else{
		userPic.css("margin-top","0px");
	}
});
$("#tt a:first").addClass("on");
$(".userbox img:not(:first)").hide();
});
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

相关博文

标签：,

相关日志

给作者留言：