實現圖片等比例縮放!

[轉] 其中 this.width > 400 ? this.width = 400 : this.width   意思是如果圖片的寬度大於400,則限制顯示圖片時的大小為400,如果圖片小於400,就按圖片按大小顯示,可以自行調整這個最大寬度以適合你的需求了
HTML代碼


[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


HTML代碼


[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


再補一個:
在處理網頁圖片時,特別是一些圖片列表的應用裡面,很難保證圖片統一大小,直接設置圖片大小又會導致圖片拉伸,造成圖片模糊,本文介紹的代碼可以在圖片加載完成後自動按比例調整圖片大小。
HTML代碼


[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]


調用方式:
程序代碼 程序代碼
<img src="1148202890.jpg" alt="自動縮放後的效果" onload="javascript:DrawImage(this,200,200);" />

圖檔:


CSS的作法:
HTML代碼


[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]



[本日誌由 Admin 於 2007-10-17 04:52 AM 編輯]
文章來自: 本站原創
引用通告: 查看所有引用 | 我要引用此文章
Tags:
評論: 0 | 引用: 0 | 查看次數: 4303
發表評論
昵 稱:
密 碼: 游客發言不需要密碼.
內 容:
驗證碼: 驗證碼
選 項:
雖然發表評論不用注冊,但是為了保護您的發言權,建議您注冊帳號.
字數限制 1000 字 | UBB代碼 開啟 | [img]標簽 關閉