javascript css 图片居中、图片自适应大小、获得图片原始大小
2011-11-03 10:21
3104人阅读
评论 (0)
用户上传的图片是大小各异虽然在服务器端处理过了，但是有些时候还需要不同的大小，当然用服务器端计算比例显示在页面上也是可以的，但是如果让客户端自己计算并缩放大小就更好了，分享一个函数给大家。
首先在父标签使用宽度高度和overflow:hidden不让图片因为过大而使页面变形，然后在图片的onload时间中使用这个函数可以先获取图片原始大小，然后计算等比例缩放后的大小，使图片显示合适的大小，然后让图片居中。
<!doctype html>
<html>
<head>
<script>
function imagezoom(new_w, new_h){
var img = document.createElement('img');
img.src = this.src;
var src_w = img.width;
var src_h = img.height;
var zoom_w = 0, zoom_h = 0;
if(src_w > new_w || src_h > new_h){
var scale_w = new_w / src_w;
var scale_h = new_h / src_h;
var b = scale_w < scale_h;
if(b){
zoom_w = src_w * scale_w;
zoom_h = src_h * scale_w;
}else{
zoom_w = src_w * scale_h;
zoom_h = src_h * scale_h;
}
}else{
zoom_w = src_w;
zoom_h = src_h;
}
this.style.marginLeft = Math.abs(new_w-zoom_w)/2+'px';
this.style.marginTop = Math.abs(new_h-zoom_h)/2+'px';
this.width = zoom_w;
this.height = zoom_h;
}
</script>
</head>
<body>
<div style="width:200px;height:200px;overflow:hidden;border:1px #DDD solid;">
<img src="20111102180236092790.jpg" onload="imagezoom.call(this, 200, 200);" />
</div>
</body>
</html>