轉自：http://blog.csdn.net/rj042/article/details/4873576

做過web開發的哥們都會遇到要顯示圖片的情況。有時候在頁面上因為佈局的限制，所以需要限制圖片顯示的尺寸（即縮圖顯示）。

有如下幾種情況：

1：要求圖片以某個寬度顯示，比如150. 則可以這樣指定<img src="圖片路徑" width="150">

這樣可以保證圖片顯示的寬度為150，而高度也會以等比例顯示，最終顯示的圖片也不會變形。

2：同理要求以某個高度顯示，比如150，這同樣可以這樣指定<img src="圖片路徑" heigh="150">

這樣可以保證圖片顯示的高度為150，而寬度也會以等比例顯示，最終顯示的圖片也不會變形。

3：要求圖片以某個寬度和高度顯示，比如150*150.

如果是動態頁面，則很好辦，可以事先在動態程式碼中算出縮圖後的寬度和高度的，然後指定這個最接近的屬性，就行了。

比如原始圖片是1024*800的，則縮圖因子=7（取1024/150和800/150的值中大的）。根據縮圖因子得到原圖縮圖後是147*115.而縮圖後的寬度是147，更接近要求的寬度150（縮圖後的高度是115，相對要求的高度150差距較大）。所以可以這樣指定<img src="圖片路徑" width="150">， 這樣圖片也不會變形，也保證了高度不會超過150。

當然，有人會說通過在img標籤的onload事件處理縮圖。這樣也可以，但對於不同的瀏覽器，會得到不同的結果。在ie中，由於存在快取，所以通過onload事件往往不起作用。除非加上防止快取的程式碼！