用 CSS 讓圖片自動縮放大小

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

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

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

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

<HEAD>
<style type="text/css">
img.thumbnail
{
  max-width:400px;
  max-height:300px;
  border:0;
}
a.thumbnail
{
  border-style:none;
}
</style>
</HEAD>

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

本報導資料來源：Steven Pinker

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