在制作網(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)行一下,見附圖二: