JS按比例縮放圖檔

在網頁設計或程式設計中如何以最友善的方法來處理圖檔的寬高，以達到最佳的顯示效果，這個問題相信很多網頁制作人員都遇到過，最麻煩最費時間的做法是用制圖軟體Photoshop等來一張張處理，這種方法如果處理一兩張還好點，多了真是麻煩；最快的做法是直接給圖檔固定一個寬高，這樣做的缺點就是影響頁面的美觀，而大多數的做法是使用JS來控制圖檔的顯示尺寸在一定的範圍内，不會比例失調，保證了圖檔不會變形，相信這種方法是最合适的。

下面這段腳本在IE、FIREFOX、OPERA、NETSCAPE測試都适用（[email protected]蛐蛐）：

程式代碼 function SetSize(obj)

{ var width=80;height=60;

myImage = new Image();

myImage.src = obj.src;

if (myImage.width>0 && myImage.height>0)

{

var rate = 1;

if (myImage.width>width || myImage.height>height)

{

if (width/myImage.width<height/myImage.height)

{

rate = width/myImage.width;

}

else

{

rate = height/myImage.height;

}

}

if (window.navigator.appName == "Microsoft Internet Explorer")

{

obj.style.zoom = rate;

}

else

{

obj.width = myImage.width*rate;

obj.height = myImage.height*rate;

}

}

}

用法：

程式代碼 <img src="img/offer/41936519.jpg" border="0" style="zoom: 0.1" οnlοad="SetSize(this)"/>