如何设置使得图片大小不超过500*375

下面这个代码有点郁闷，如果开始id为bigpic的img不设置src属性，则超过500*375全部原图大小显示；如果开始id为bigpic的img设置src并且该图片小于500*375，则点击下面的小图片，上面bigpic所显示的大小全部为开始设置bigpic的src属性的那个图片的大小，而再次点击小图片则上面的bigpic能有js效果即在500*375的范围内
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>限制图片大小测试</title>
</head><body onload="DrawImage(bigpic)">
<script language="JavaScript"> 
<!-- 
function DrawImage(ImgD){ 
  var image=new Image(); 
  var iwidth = 500;  //定义允许图片宽度 
  var iheight = 375;  //定义允许图片高度 
  image.src=ImgD.src;
  document.getElementById("width").value=document.images.bigpic.width //检查测试的值
  document.getElementById("width2").value=image.width //检查测试的值
  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; 
    } 
   } 
  document.getElementById("width3").value=document.images.bigpic.width //检查测试的值
  document.getElementById("width4").value=image.width //检查测试的值
}  
function ove(nyr){
   document.images.bigpic.src=nyr;
   DrawImage(document.images.bigpic);
}  
//--> 
</script> 
<div style="width:502px;height:377px;"><img src="pic/testsmall1.jpg" name="bigpic" id="bigpic" border="1"></div>
<a style="cursor:pointer;" onclick="ove('pic/testsmall1.jpg')"><img src="pic/testsmall1.jpg" border="0" /></a></div>
<a style="cursor:pointer;" onclick="ove('pic/123.jpg')"><img src="pic/testsmall1.jpg" border="0" /></a></div>
<a style="cursor:pointer;" onclick="ove('pic/100.jpg')"><img src="pic/testsmall1.jpg" border="0" /></a></div>
<div>开始函数时<br/>
bigpic<input name="width" id="width" type="text" />
image对象<input name="width2" id="width2" type="text" />
</div>
<div>结束函数时<br/>
bigpic<input name="width3" id="width3" type="text" />
image对象<input name="width4" id="width4" type="text" />
</div>
</body>
</html>