用 CSS 讓圖片自動縮放大小

用 CSS 讓圖片自動縮放大小(二)

下圖原始圖檔 pic01.jpg 尺寸為 600 X 450
你可以在這張圖檔上，使用滑鼠右鍵，選擇內容，查看原始圖檔的尺寸。

使用 CSS 串接樣式表單後，便可將此圖檔自動等比率縮放為想要的尺寸。
優點：不論圖檔大小尺寸，只要使用這組 CSS 串接樣式表單，網頁內所有圖檔，都會產生同樣尺寸。
下圖使用 CSS 串接樣式表單將此圖檔 pic01.jpg，設定為自己指定的縮放尺寸，本例為 200px X 200px
你可以在這張圖檔上，使用滑鼠右鍵，選擇內容，查看縮過的尺寸。

使用 CSS 串接樣式表單如下：

<HEAD>
<style type="text/css">
.resize {
width : auto;
width : 200px;
}

.resize {
height : auto;
height : 200px;
}
</style>
</HEAD>

<BODY>
<div>
<img src=pics/pic01.jpg border=0 class="resize" alt="這是自動縮放後的圖片效果">
</div>
</BODY>

本報導資料來源：SachinKRaj weBLOG

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