用 CSS + JavaScript 讓圖片自動縮放大小(五)

用 CSS + JavaScript 讓圖片自動縮放大小(五) - 簡易縮圖目錄

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

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

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

<HEAD>
<style type="text/css">
.alumb{
	width:200px;
	height:200px;
	float:left;
	margin: 2px;
	padding: 2px;
	border: 1px solid #CCCCCC;
}
</style>
<script language="JavaScript" src="image.js"></script>
</HEAD>

<BODY>
<div class="alumb">
<img src="pics/pic01.jpg" onload="AlumbImg(this)"/>
</div>
</BODY>

本報導資料來源：梅問題‧教學網

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