HTML img width 圖片寬度設計

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

用 width 屬性修改 HTML img 的寬度範例
原始圖片<br>
<img src="upload/20150704185839.png"><br><br>
將 img 的 width 縮小為 200px<br>
<img src="upload/20150704185839.png" style="width:200px;"><br><br>
將 img 的 width 放大為 360px<br>
<img src="upload/20150704185839.png" style="width:360px;"><br><br>
同時設定 img 的 width 與 height 為 360x100<br>
<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 圖片設計
© Copyright webtech.tw Since 2010