javascript css 图片居中、图片自适应大小、获得图片原始大小

2011-11-03 10:21  1189人阅读  评论 (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>