HTML img width 圖片寬度設計 - 網頁設計教學站

HTML img width 一般解讀為圖片的寬度，不過實際上，網頁圖片的寬度並不是直接用 width 來設定，而是必須先用 CSS 的 style 來宣告一個 width 屬性，我們在待會兒的範例語法中會寫給各位讀者朋友看，透過 width 屬性來的設計圖片寬度有一定的技巧，如果不同時設定 height 圖片高度，在大多數瀏覽器中，width 屬性可以讓圖片等比例放大縮小，一樣會在範例中呈現給各位讀者朋友看。

用 width 屬性修改 HTML img 的寬度範例

原始圖片 
<img src="upload/20150704185839.png"> 
將 img 的 width 縮小為 200px 
<img src="upload/20150704185839.png" style="width:200px;"> 
將 img 的 width 放大為 360px 
<img src="upload/20150704185839.png" style="width:360px;"> 
同時設定 img 的 width 與 height 為 360x100 
<img src="upload/20150704185839.png" style="width:360px;height:100px;">

範例的修改結果

原始圖片

將 img 的 width 縮小為 200px

將 img 的 width 放大為 360px

同時設定 img 的 width 與 height 為 360x100

我們在範例中總共準備了四張圖片呈現，每張圖片其實都是一樣的原圖，差別在於用 width 屬性修改過，呈現的結果就大不同，當我們把圖片的寬度強制縮小至 200px 或強制放大到 360px，圖片都是自動縮放，唯獨第四張圖，我們同時用了 width 與 height 兩個屬性，故意沒有維持原本的長寬比例設定，可以看到圖片變形了，這也是一種技巧。

關於圖片寬度的設定，可以參閱《HTML img height 圖片高度設計》的詳細介紹。

更多 HTML img 圖片設計