HTML <img> height 屬性
定義和用法
height 屬性規定圖像的高度，以像素為單位。
提示：請始終為圖像指定 height 和 width 屬性。如果設置了高度和寬度，則會在加載頁面時預留圖像所需的空間。反之，如果沒有這些屬性，瀏覽器就不知道圖片的尺寸，也就無法為之預留合適的空間。這將導致頁面布局在加載期間發生變化（當圖像加載時）。
提示：使用 height 和 width 屬性縮小大型圖像會強制用戶下載大型圖像（即使在頁面上看起來很小）。為避免這種情況，在將圖像用于頁面之前，請使用圖像處理軟件重新調整其尺寸。
延伸閱讀：詳解 height 和 width 屬性
實例
一張高 600 像素，寬 500 像素的圖片：
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
語法
<img height="pixels">
屬性值
| 值 | 描述 |
|---|---|
| pixels | 規定圖像的高度，以像素計（例如 height="100"）。 |
更多實例
改變圖像大小 - 制作填充圖像
height 和 width 屬性有一種隱藏的特性，就是人們無需指定圖像的實際大小，也就是說，這兩個值可以比實際的尺寸大一些或小一些。瀏覽器會自動調整圖像，使其適應這個預留空間的大小。使用這種方法就可以很容易地為大圖像創建其縮略圖，以及放大很小的圖像。但需要注意的是：瀏覽器還是必須要下載整個文件，不管它最終顯示的尺寸到底是多大，而且，如果沒有保持其原來的寬度和高度比例，圖像會發生扭曲。
使用 height 和 width 屬性的另外一種技巧，是可以非常容易地實現對頁面區域的填充，同時還可以改善文檔的性能。設想一下，如果你想在文檔中放置一個彩色的橫條。您不需要創建一個具有完整尺寸的圖像，相反，您只要創建一個寬度和高度都為 1 個像素的圖像，并把自己希望使用的顏色賦給它。然后使用 height 和 width 屬性把它擴展到更大的尺寸。
<img src="/i/ct_1px.gif" width="200px" height="30px" />
這是上面這段 HTML 的效果，這個顏色彩條是用只有一個像素的圖像制成的：
使用百分比值
使用 width 屬性的最后一個技巧是使用百分比值來代替像素的絕對值。這將使瀏覽器按照與瀏覽器顯示窗口的一定比例來縮放圖像。因此，如果要創建一個寬度與顯示窗口寬度相同，高度為 30 個像素的彩色橫條，可以這樣實現：
<img src="/i/ct_1px.gif" width="60%" height="30px" />
當文檔窗口的大小改變時，這個圖像的大小也會隨之改變：
提示：如果提供了一個百分比形式的 width 值而忽略了 height，那么不管是放大還是縮小，瀏覽器都將保持圖像的寬高比例。這意味著圖像的高度與寬度之比將不會發生變化，圖像也就不會發生扭曲。
請看下面的 HTML：
<img src="/i/ct_1px.gif" width="20%" />
也就是說，如果只設置圖像 ct_1px.gif 的 width 屬性的百分比值，會得到一個矩形圖像（這是因為原始的 ct_1px.gif 就是一個只有 1px 寬和高的矩形）：
提示：我們提供以上例子的目的是為了使您更好地理解 height 和 width 屬性的用法。如果您只是需要大面積的純色塊來裝飾頁面，那么更好的辦法是使用 CSS 來創建背景色。
詳解 height 和 width 屬性
為什么要使用 height 和 width 屬性
您是否見過當文檔加載時其內容會顯示不規律的移動。之所以會這樣，是因為瀏覽器為了能夠顯示每一個加載的圖像，而不斷地重新調整頁面的布局。瀏覽器通過下載并解析出圖像的寬度和高度來決定圖像的大小，然后就會在顯示窗口中留出一個相應的矩形空間。然后瀏覽器就會調整頁面的顯示布局，以便把圖像插入到顯示當中。這同時也告訴我們，圖像是獨立的文件，它與源文件都分別是獨立加載的。
但是這不是一種最有效的顯示文檔的方法，因為瀏覽器在顯示相鄰的以及后面的文檔內容之前，必須要檢查每一個圖像文件，并計算它們的屏幕空間。這可能會給文檔的顯示帶來非常大的延遲，從而打斷用戶的閱讀。
對于創作者來說，一種更為有效的方法是通過 <img> 標簽的 height 和 width 屬性來指定圖像的尺寸。這樣的話，瀏覽器在下載圖像之前就為其預留出了位置，從而可以加速文檔的顯示，還可以避免文檔內容的移動。這兩個屬性都要求是整數值，并以像素為單位來表示圖像尺寸。這兩個屬性在 <img> 標簽中出現的次序并不重要。
height 和 width 屬性的問題
雖然 <img> 標簽的 height 和 width 屬性能夠改善性能并讓你實現一些小技巧，但在使用它們時還是有一些棘手的負面效果。即使用戶已經關掉了自動下載圖像的功能，瀏覽器還是要把為圖像預留的空間以指定的尺寸顯示出來。而這樣留給讀者的通常是一個空的框架，里面有一個毫無意義的圖標，表示這是放置圖像的位置。這時頁面將看上去非常糟糕，就像根本沒有完成一樣，并且大部分內容都毫無用處。如果不用這些指定的尺寸，則瀏覽器將只是在文本中放置一個圖像圖標，這樣顯示中至少還有一些文字可以閱讀。
對于這個問題我們還沒有解決方案，只能強調一點，就是去使用 alt 屬性 和一些描述性文字，這樣讀者至少知道這里缺少的是什么東西。我們還是建議您使用這些尺寸屬性，因為我們鼓勵一切能夠改善網絡性能的行為。
瀏覽器支持
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 支持 | 支持 | 支持 | 支持 | 支持 |
