HTML img 圖片寬度與高度設計技巧

HTML img 圖片寬度與高度設計技巧需要用到的是 HTML img tag 圖片標籤的 width 屬性與 height 屬性，其中 width 屬性控制的是圖片的寬度、height 屬性控制的則是圖片高度，設定寬度或高度時，要注意盡量與圖片本身的尺寸相同，否則會造成圖片的失真，由於 width 與 height 都是 HTML img tag 的基本屬性，所有主流的瀏覽器都支援，只是調整圖片寬度與高度的效果要看設計師怎麼運用。

HTML img 圖片寬度與高度屬性語法
<img src="圖片網址" width="圖片寬度" height="圖片高度">
HTML img tag 圖片標籤的寬度與高度都是選用項目，也就是說不一定要使用或是只用寬度或只用高度來調整圖片。無論是 width 還是 height 的預設單位都是 px，例如寬度為 200px 的圖片，width 可以寫成「width="200"」這樣，因為瀏覽器會自動認為 200 就是 200px 的意思，同樣的單位概念套用到高度 height 也是一樣的效果。以下為 HTML img 圖片寬度與高度屬性的應用範例。

HTML img 圖片寬度與高度設計範例一、寬度與高度都用上
<img src="圖片網址" title="尺寸為 300 x 225 的圖片" width="300" height="225">
<img src="圖片網址" title="寬度限制為 200px、高度限制為150px" width="200" height="150">
<img src="圖片網址" title="寬度限制為 100px、高度限制為150px" width="100" height="150">
範例輸出的效果
範例一總共有三張圖片，第一張圖片所呈現的是原始圖片，尺寸為 300x225，所以對絕大多數的瀏覽器來說，第一張圖片的 width 與 height 其實沒有寫也可以正常顯示。第二張圖片透過寬度與高度的等比例設定，讓圖片在比例沒跑掉的情況下縮小，原圖是同一張，只是看起來變小張了。第三張圖片則是刻意將寬度與高度的比例用錯，很清楚的可以看到圖片顯示的結果為錯誤比例。

HTML img 圖片寬度與高度設計範例二、只調整圖片的寬度，保持正確比例
<img src="圖片網址" title="尺寸為 300 x 225 的圖片">
<img src="圖片網址" title="寬度限制為 200px、高度不調整" width="200">
<img src="圖片網址" title="寬度限制為 100px、高度不調整" width="100">
範例輸出的效果
範例二與範例一其實很類似，唯一的差別只在第二張圖與第三張圖都不調整圖片的高度，只單純的調整圖片的寬度，大多數的瀏覽器都很聰明，會自動根據設定的圖片寬度以及原始圖片的比例，讓呈現出來的圖片用原始圖片的比例縮放，所以範例二的三張圖片比例都是一樣的，差別僅在於大小張不同而已，這也是將常使用的圖片尺寸調整技巧。

不過儘管大部份的瀏覽器都很聰明，懂得自己根據寬度與原始比例判斷出應該要有的高度，可是不是永遠都這麼順利，所以在可行的情況下，還是自己將圖片的寬度與高度設定好比較妥當。

更多 HTML img 圖片設計技巧
© Copyright webtech.tw Since 2010