用 CSS 讓圖片自動縮放大小(三)
下圖原始圖檔 pic01.jpg 尺寸為 600 X 450
你可以在這張圖檔上，使用滑鼠右鍵，選擇內容，查看原始圖檔的尺寸。
這是原始大圖片
使用 CSS 串接樣式表單後，便可將此圖檔自動等比率縮放為想要的尺寸。
優點：不論圖檔大小尺寸，只要使用這組 CSS 串接樣式表單，網頁內所有圖檔，都會產生同樣尺寸。
下圖使用 CSS 串接樣式表單將此圖檔 pic01.jpg 自動縮放尺寸為 500 X 375 等比率的圖檔
你可以在這張圖檔上，使用滑鼠右鍵，選擇內容，查看縮過的尺寸。
這是自動縮放後的圖片效果
使用 CSS 串接樣式表單如下：
<HEAD>
<style type="text/css">
#div img {    
max-width:500px;     
myimg:expression(onload=function(){     
this.style.width=(this.offsetWidth > 500)?"500px":"auto"});     
}
</style>
</HEAD>

<BODY>
<div>
<img src=pics/pic01.jpg border=0 alt="這是自動縮放後的圖片效果">
</div>
</BODY>
本報導資料來源：飛鳥新樂園

請按瀏覽器的檢視原始碼查看