在制作网站的过程中，经常会碰到这样的问题，想用程序将某个图片均匀的缩小，并且动态的实现，这样做的目的一是为了实现某个功能或界面，二是为了让图片不变形，比如原来宽是200px，高是100px,均匀缩小后，当宽为100px时，高自动就变成50px。
什么情况下需要通过程序来缩小图片呢？比如网站的缩短图片，因为这些图片都是从后台由客户上传上去的，有大有小，不好一概而论，也无法知道客户什么时候上传，上传多大的，什么尺寸的，所以这个时候就需要有程序控制，自动均匀缩小，还有一种情况，就是叫客户直接做成缩略图这么大的，这显然也不行，因为点击后就无法看到大图了，因而非常有必要。
一个更重要的情况就是当用Ipad或是手机访问时，如果不用程序对图片进行控制处理的话，图片就会把网页撑开，此时就需要把图片均匀缩小，这样又不变形，又能让用户看到合适的满意的图片，因为更多的情况是手机与电脑共享一个数据库，客户在后台上传文字与图片混排时，这时的图片肯定是很大的，至少用手机打开时会大，所以均匀缩小非常有必要。这时候使用js可以实现这个功能，直接上解决方案：
当宽度大于380px的时候，就自动调用该js，或是高度过500px时自动调用该js（其实这个高度有时用不着设置的，无论是电脑，或是手机，或是IPad更多关注的是宽度，宽度太宽，网页会被撑开，高度太高，那倒没有什么，反正浏览是一切正常。）
<script language="JavaScript" type="text/JavaScript">
function DrawImage(ImgD){
var image=new Image();
var iwidth = 380; //当宽度大于380px时等比例缩小
var iheight = 500; //定义允许图片高度，当高度大于500px时等比例缩小
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else{
if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}</script>
那究如何使用呢？咱们上代码，上完后就会明白了。见附图一：
在一个网页上插入一个图片，结果代码是这样的：<div><img src="upload/abc.jpg" border="0"></div>
如果想让这个图片动态的显示大小，可以这样弄：<div><img src="upload/abc.jpg" border="0" onload="DrawImage(this);"></div>
然后就OK了，就这样简单。
运行一下，见附图二：
