up
down
Close
架站盒子
Web Development Box
 

HTML img size 圖片大小設置(width、height)

│ 32266 Views │ HTML
HTML img size 圖片大小設置(width、height)
HTML img size 圖片大小設置(width、height)
  1. 設置 width
  2. 設置 height
  3. 設置 width 和 height
  4. 圖片百分比

HTML img size 圖片尺寸可以透過widthheight來設定,當使用 HTML 標籤時一般不需要指定單位,其單位預設為px

當只有設置寬width時,圖片高度將依照比例放大,同理,只設置height時,圖片寬度也將依照比例放大,如果要控制長跟寬則兩者都要設置。

設置 width

以下範例為只設置width,其高度為圖片比例自動縮放。


<img src="圖片位址" width="200">

width="200"

設置 height

以下範例為只設置height,其寬度為圖片比例自動縮放。


<img src="圖片位址" height="200">

height="200"

設置 width 和 height

以下範例為設置widthheight,圖片將依照指定的值呈現。


<img src="圖片位址" width="200" height="200">

width="200" height="200"

圖片百分比

HTML 標籤的widthheight可以設定百分比,例如width="50%"height="50%"


<img src="圖片位址" width="50%">

width="50%"

height百分比沒有作用?

如果你設置的高度沒有起到作用,你需要為它的父元素增加height設定,因為它是依照父元素的height做比例縮放的。


<div style="height:200px">
<img src="圖片位址" height="50%">
</div>

這個框框是父元素,高度設置200px,圖片高度為50%(=100px)。

以上就是 HTML 標籤的widthheight的設定,這裡小小提醒一下,如果不是針對某一圖片獨立設定,而是大量圖片都需要設定的話,建議使用 CSS 統一設定,一張一張設定不僅耗時,當要修改時也會一張張改到死。

延伸閱讀

本文是否對您有幫助?