| 用 CSS 讓圖片自動縮放大小(一) |
|
下圖原始圖檔 pic01.jpg 尺寸為 600 X 450 你可以在這張圖檔上，使用滑鼠右鍵，選擇內容，查看原始圖檔的尺寸。 |
 |
|
使用 CSS 串接樣式表單後，便可將此圖檔自動等比率縮放為想要的尺寸。 優點：不論圖檔大小尺寸，只要使用這組 CSS 串接樣式表單，網頁內所有圖檔，都會產生同樣尺寸。 下圖使用 CSS 串接樣式表單將此圖檔 pic01.jpg 自動縮放尺寸為 500 X 375 等比率的圖檔 你可以在這張圖檔上，使用滑鼠右鍵，選擇內容，查看縮過的尺寸。 |
|
|
|
使用 CSS 串接樣式表單如下： |
<HEAD>
<style type="text/css">
div img {
/* IE7、FF 等其他非 IE 瀏覽器下最大寬度為 500px , IE6 以下不支援 max-width 屬性 */
max-width:500px;
/* 所有瀏覽器中圖片的大小為 500px */
width:500px;
/* 當圖片大小大於 500px，自動縮小為 500px */
width:expression(document.body.clientWidth>500?"500px":"auto");
overflow:hidden;
}
</style>
</HEAD>
<BODY>
<div>
<img src=pics/pic01.jpg border=0 alt="這是自動縮放後的圖片效果">
</div>
</BODY>
|
|
本報導資料來源：MyGAF 精選論壇 |
請按瀏覽器的檢視
原始碼查看