圖片不變形，按照等比例縮小或擴大顯示

來源：http://hi.baidu.com/shenxj007/blog/item/a934270672c08773020881ff.html

有很多人問到，在網站應用程式中，由於圖片是後台增加的，圖片的寬度和高度大小都不一致，如何使圖片在前台顯示的大小都保持一至，且不能變形（就像windows圖片檔案夾裡的縮圖一樣）。對於這個問題，下面有兩種很簡單的實現辦法。

首先我們來分析一下應該怎樣實現，首先圖片大小是未知的，要讓圖片在網頁中顯示固定大小而不變形，就不能用平常的width=".." height="..."來控制了。而有人說，只設定圖片的寬，而不設定圖片的高，或只設定圖片的高，而不設定圖片的寬就行了。對於這種處理方式，仔細想想也行不通。因為這樣雖然使圖片的顯示比例與圖片的實際大小的比例一致，但無法保證圖片在網頁中顯示的大小一樣大。而我們應該用下面這樣的思路來做：

（假設我們想讓網頁中圖片的最大寬度或最大高度不能超過120像素。）
先判斷圖片的寬度和高度，如果寬度大於高度，就設定圖片的寬度為120(width="120")，這樣，由於高度比寬度小，所以圖片的長寬都在120像素以內。保證了圖片的大小範圍在120*120像素內 。同理，如果圖片的高度大於寬度，就應指定圖片的高度為120(height="120")。這樣，所有圖片的大小都在這個範圍之內。而要實現這樣的效果，我們現在最大的問題是怎樣取得圖片的寬和高。有了思路，下面我提供了兩種最簡單的方法：

一、利用ASP FSO來取的圖片圖片的寬度和高度，然後再按上面的思路，輸出圖片，此方法略。

二、利用javascript結合圖片的onload事件來實現。
這種方法非常簡單，onload作為img元素的標準事件，您完全可以用以下非常簡單的代碼來實現,
範例程式碼如下：

<img src="圖片地址" onload="if(this.width>this.height){this.width=120;}else{this.height=120;}">

說明：以上img標籤中不能再指定width 和height屬性，否則指令碼程式就沒有什麼作用了。
有些網友也是利用javascript來實現，但其中有些代碼會被最新的IE或IE補丁所阻止，推薦採用以上第二種辦法

<img src="圖片地址" onload="if(this.width>this.height){this.width=120;}else{this.height=120;}">