jquery 等比例缩放图片插件

图片不经过服务器，直接用的是地址。但是他要求图片不能变形扭曲。这样就要在客户端用JS做。好在有了jQuery，这个做起来还比较方便。一个小小的插件autosize.

假设有这么个图片

<img src=uploads/hphq.jpg" width="200" height="300" />

图片的尺寸被强制的设为了200*300，如果这个地址的图片比例不是2：3的话，这张图片就会变形。所以我想办法，让他占据的大小依然是200*300,而且让图片等比例放大到最大限度。于是有了下面插件。

使用方法很简单。使用前必须在头部引入jquery库和我的image.js

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/image.js"></script>

然后我们在图片上加点料

<img src=uploads/hphq.jpg" width="200" height="300" autosize='yes' pos='0' />

这里的autosize=’yes’是默认的选择器，image.js已经绑定了在文档加载完毕的时候处理有这个标记的图片.
pos=’0’表示长图片居中显示，这个值有三种选择，如果不指定这个值，则居中显示，也为0 .
-1:居于顶部
0:居于中间
1:居于底部
水平方向始终居中显示.
其实这样就可以了，不用加任何其他的代码，我们上面的这张图片已经居中显示了。

我们也可以手动指定要处理的图片。

$(“img”).autosize(‘#999’);

这样就可以选择所有图片并处理它，那么这里有一个可选的参数，表示填充的背景色。如果不填写这个参数，默认填充为白色
附：image.js 源码

function ResizeImage(obj,color){
	if(obj.length>1){alert('select error');	return ;}
	if(color==undefined){color='#ffffff';}	
	var width=obj.attr('oldwidth');
	var height=obj.attr('oldheight');	
	if(width==undefined){width=obj.attr('width');height=obj.attr('height');}	
	var pos=obj.attr('pos');	
	if(pos==undefined){pos=0;}	
	var src=obj.attr('src');
	var img=new Image();
	img.src=src;
	var oldwidth=img.width;
	var oldheight=img.height;	
	var pw=width/oldwidth;
	var ph=height/oldheight;
	var left=0;
	var top=0;	
	if(pw<ph){
		img.width=width;
		img.height=oldheight*pw;
		top=parseInt((height-img.height)/2);
	}else{
		img.height=height;
		img.width=oldwidth*ph;
		left=parseInt((width-img.width)/2);
	}
	obj.attr('width',img.width);
	obj.attr('height',img.height);
	obj.attr('oldwidth',width);
	obj.attr('oldheight',height);
	obj.attr('src',img.src);
	obj.css('position','absolute');
	obj.css('left',left);
	if(pos==1){obj.css('bottom',0);}
	if(pos==0){obj.css('top',top);}
	if(pos==-1){obj.css('top',0)}	
	//包裹
	if(obj.parent("div[autosize='yes']").length==0){
		var div=document.createElement('div');
		$(div).css('width',width);
		$(div).css('height',height);
		$(div).css('position','relative');
		$(div).css('border','none');
		$(div).attr('autosize','yes');
		$(div).css('background-color',color);
		obj.wrap(div);
	}
	delete img;
}
jQuery.fn.extend({
	autosize:function(color){
		this.each(function(){
			ResizeImage($(this),color);	
		})
	}
});
$(function(){
		$("img[autosize='yes']").autosize('#999');
});