HTML img width 圖片寬度

HTML img 圖片的寬度設定可以透過 width 屬性來處理,通常 width 還會搭配高度 height 來制定圖片的大小,單純的只用 width,瀏覽器會保持圖片的長寬比例呈現,但如果加上高度屬性,則圖片比例可能會有所改變。

HTML img width 寬度語法範例

<img src="圖片網址" width="寬度值">


HTML img width 寬度值可以只用數字或百分比,以下提供幾個範例供參考,我們以這張原始圖片做變化。



範例一、img width 設為 200。(語法參考:<img src="圖片網址" width="200">)



↑ 原本的圖片寬度為 300,透過 width=200 強制將圖片等比例縮小。

範例二、img width 設為 200,height 設為 100。(語法參考:<img src="圖片網址" width="200" height="100">)



↑ 這次加上了高度 height=100 的規格,可以看到圖片比例已經不一樣囉!

範例三、img width 設為 50%。(語法參考:<img src="圖片網址" width="50%">)



↑ 寬度設為 50%,讓圖片隨著頁面顯示 50% 的寬度。

雖然無論圖片原本的大小是多少,都可以透過 width 來制定寬度以符合版面的規格,但不建議完全使用這樣的方式,比較正確的方式是在圖片上傳到網站前,就先用繪圖軟體(如 GIMP)將寬度與高度設計好,或是上傳的時候用 PHP 將圖檔縮小。

如果你讓網友看商品型錄,而商品型錄的每張小圖都沒有先縮好,僅用 img width 將原本的大圖限制為小規格,將會浪費許多頻寬,且當網友端的頻寬比較小的時候(如用手機行動上網瀏覽),閱讀的速度就會比較慢。

延伸閱讀
HTML img 圖片標籤
HTML 圖片插入或加入連結語法
GIMP 跨平台開放原始碼影像處理軟體
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012
PHP Smarty MySQL JQuery Apache W3C