在制作網(wǎng)站的過程中，經(jīng)常會碰到這樣的問題，想用程序?qū)⒛硞�(gè)圖片均勻的縮小，并且動態(tài)的實(shí)現(xiàn)，這樣做的目的一是為了實(shí)現(xiàn)某個(gè)功能或界面，二是為了讓圖片不變形，比如原來寬是200px，高是100px,均勻縮小后，當(dāng)寬為100px時(shí)，高自動就變成50px。
什么情況下需要通過程序來縮小圖片呢？比如網(wǎng)站的縮短圖片，因?yàn)檫@些圖片都是從后臺由客戶上傳上去的，有大有小，不好一概而論，也無法知道客戶什么時(shí)候上傳，上傳多大的，什么尺寸的，所以這個(gè)時(shí)候就需要有程序控制，自動均勻縮小，還有一種情況，就是叫客戶直接做成縮略圖這么大的，這顯然也不行，因?yàn)辄c(diǎn)擊后就無法看到大圖了，因而非常有必要。
一個(gè)更重要的情況就是當(dāng)用Ipad或是手機(jī)訪問時(shí)，如果不用程序?qū)D片進(jìn)行控制處理的話，圖片就會把網(wǎng)頁撐開，此時(shí)就需要把圖片均勻縮小，這樣又不變形，又能讓用戶看到合適的滿意的圖片，因?yàn)楦嗟那闆r是手機(jī)與電腦共享一個(gè)數(shù)據(jù)庫，客戶在后臺上傳文字與圖片混排時(shí)，這時(shí)的圖片肯定是很大的，至少用手機(jī)打開時(shí)會大，所以均勻縮小非常有必要。這時(shí)候使用js可以實(shí)現(xiàn)這個(gè)功能，直接上解決方案：
當(dāng)寬度大于380px的時(shí)候，就自動調(diào)用該js，或是高度過500px時(shí)自動調(diào)用該js（其實(shí)這個(gè)高度有時(shí)用不著設(shè)置的，無論是電腦，或是手機(jī)，或是IPad更多關(guān)注的是寬度，寬度太寬，網(wǎng)頁會被撐開，高度太高，那倒沒有什么，反正瀏覽是一切正常。）
<script language="JavaScript" type="text/JavaScript">
function DrawImage(ImgD){
var image=new Image();
var iwidth = 380; //當(dāng)寬度大于380px時(shí)等比例縮小
var iheight = 500; //定義允許圖片高度，當(dāng)高度大于500px時(shí)等比例縮小
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>
那究如何使用呢？咱們上代碼，上完后就會明白了。見附圖一：
在一個(gè)網(wǎng)頁上插入一個(gè)圖片，結(jié)果代碼是這樣的：<div><img src="upload/abc.jpg" border="0"></div>
如果想讓這個(gè)圖片動態(tài)的顯示大小，可以這樣弄：<div><img src="upload/abc.jpg" border="0" onload="DrawImage(this);"></div>
然后就OK了，就這樣簡單。
運(yùn)行一下，見附圖二：
