巧用img的width和height屬性進行縮圖,使圖片不變形

轉自: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事件往往不起作用。除非加上防止緩存的代碼!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章