用 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>
本報導資料來源:飛鳥新樂園

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