JS图片自适应显示

    在上一家公司的时候，由于项目的关系就一直想写一个这样的类出来用的了，无奈各种原因，搁置了。

    刚好前段时间公司有个博客的项目，就心血来潮，搞了一个出来。在制作相册页面的时候很纠结。用户上传的照片的格式会有很多种，那么怎么才能让所有不同尺寸的图片都用相同的尺寸来显示而不影响排版呢？

    分享两个自己写的方法

     

function resizeImg(tar,w,h){
	var img = new Image();
	img.src = tar.src;
	tar.style.visibility = 'hidden';
		if(img.width>0 && img.height>0){
			if(img.width<img.height){
				if(img.width > w){
					tar.height = h;
					tar.width = (img.width*h)/img.height;
				}else{
					if(img.height < h){
						tar.width = img.width;
					}else{
						tar.height = h;	
					}
				}
			}else if(img.height<img.width){
				if(img.height > h){
					tar.height = (img.height*w)/img.width;
					tar.width = w;
				}else{
					if(img.width < w){
						tar.height = img.height;
					}else{
						tar.width = w;
					}
				}
			}
			tar.style.marginTop = -(tar.height - h)/2+"px";
			tar.style.marginLeft = -(tar.width - w)/2+"px";
			tar.style.visibility = 'visible';
		}
}

/*
resizeImgCut 显示区域只显示图片中间部分并且居中
*/
function resizeImgCut(tar,w,h){
	var img = new Image();
	img.src = tar.src;
	tar.style.visibility = 'hidden';
		if(img.width>0 && img.height>0){
			if(img.width<img.height){
				if(img.width > w){
					tar.width = w;
					tar.height = (img.height*w)/img.width;
				}else{
					if(img.height < h){
						tar.width = img.width;
					}else{
						tar.height = h;	
					}
				}
			}else if(img.height<img.width){
				if(img.height > h){
					tar.height = h;
					tar.width = (img.width*h)/img.height;
				}else{
					if(img.width < w){
						tar.height = img.height;
					}else{
						tar.width = w;
					}
				}
			}else{
				//tar.width = w;
				//tar.height = h;	
			}
			tar.style.marginTop = -(tar.height - h)/2+"px";
			tar.style.marginLeft = -(tar.width - w)/2+"px";
			tar.style.visibility = 'visible';
		}
}

resizeImgCut方法对应以下图片，如果图片大于显示区域，显示区域只显示图片中间部分，如果图片小于显示区域，则保持原来的宽高，居中显示。

resizeImg方法对应以下图片，如果图片大于显示区域， 显示区域显示图片全部并居中显示，如果图片小于显示区域，则保持原来的宽高，居中显示。

使用方法：

<img src="demo.jpg" οnlοad="resizeImg(400,400,this)" />

欢迎拍砖。。