第三篇
HTML教學
第五節
網頁圖片
圖片相關屬性標籤(三)
Width
="
pixel
"
Height
="
pixel
"
技巧：
將滑鼠輕輕移的到檔案總管的圖檔上
它會自動彈出文字小方塊，顯示維度、類形及大小喔
如果您看不到就是沒做好設定喔！。
<
Img
Src
="
images/pic1.jpg
"
Width
="
pixel
"
Height
="
pixel
"
>
語 法 說 明
一般圖片尺寸表示方式：會先寬乘以後高(
Width
*
Height
)表示，反過來也不影響，建議養成使用標準用法。
圖片未註明尺寸時，仍會以實際尺寸顯示，但在讀取網頁載入時，會影響網頁排版及速度，這點請不要忘記。
圖片尺寸之寬高也可任意改變，惟比率不當會產生變形；如需縮小或放大，建議還是先用繪圖軟體處理過。
您可藉由看圖軟體 (ACDSee) 或檔案總管
，得知圖片實際尺寸等資訊。
範例
HTML標籤
<
Img
Src
="
images/pic1.jpg
"
Width
="
200
"
Height
="
150
"
>
顯示結果
使用不正確的放大圖片用法
Width
="
250
"
Height
="
250
"
使用正確尺寸的圖片用法
Width
="
200
"
Height
="
150
"
未使用圖片尺寸的狀況
當圖檔沒載入或不存在時
為了達到不影響排版及加快載入速度，建議加入正確尺寸標籤是有必要的。
原則上圖片
Width
與
Height
的值是不適合使用 "
%
" 的，但用在下面這種方式，也算是一種運用技巧。
範例
HTML標籤
<
Img
Src
="
images/pic1.jpg
"
Width
="
100%
"
Height
="
8
"
>
顯示結果
實際尺寸大小
Width
="
5
"
Height
="
8
"
放大寬度
100%
用法
Width
="
100%
"
Height
="
8
"
一般圖片尺寸表示方式：會先寬乘以後高(Width * Height)表示，反過來也不影響，建議養成使用標準用法。
為了達到不影響排版及加快載入速度，建議加入正確尺寸標籤是有必要的。
