定義和用法
<img> 標簽的 height 和 width 屬性設置圖像的尺寸。
提示：為圖像指定 height 和 width 屬性是一個好習慣。如果設置了這些屬性，就可以在頁面加載時為圖像預留空間。如果沒有這些屬性，瀏覽器就無法了解圖像的尺寸，也就無法為圖像保留合適的空間，因此當圖像加載時，頁面的布局就會發生變化。（下面的篇幅詳細解釋了這個觀點）。
提示：請不要通過 height 和 width 屬性來縮放圖像。如果通過 height 和 width 屬性來縮小圖像，那么用戶就必須下載大容量的圖像（即使圖像在頁面上看上去很小）。正確的做法是，在網頁上使用圖像之前，應該通過軟件把圖像處理為合適的尺寸。
延伸閱讀：詳解 height 和 width 屬性
實例
將圖像寬度和高度分別設置為 200 像素：
<img src="/i/mouse.jpg" height="200" width="200" />
更多實例
改變圖像大小 - 制作填充圖像
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 屬性。
語法
<img height="value" />
或者：
<img width="value" />
屬性值
| 值 | 描述 |
|---|---|
| pixels | 以像素為單位的高度或寬度值。 |
| percent | 以包含元素的百分比計的高度或寬度值。 |
詳解 height 和 width 屬性
為什么要使用 height 和 width 屬性
您是否見過當文檔加載時其內容會顯示不規律的移動。之所以會這樣，是因為瀏覽器為了能夠顯示每一個加載的圖像，而不斷地重新調整頁面的布局。瀏覽器通過下載並解析出圖像的寬度和高度來決定圖像的大小，然后就會在顯示窗口中留出一個相應的矩形空間。然后瀏覽器就會調整頁面的顯示布局，以便把圖像插入到顯示當中。這同時也告訴我們，圖像是獨立的文件，它與源文件都分別是獨立加載的。
但是這不是一種最有效的顯示文檔的方法，因為瀏覽器在顯示相鄰的以及后面的文檔內容之前，必須要檢查每一個圖像文件，並計算它們的屏幕空間。這可能會給文檔的顯示帶來非常大的延遲，從而打斷用戶的閱讀。
對於創作者來說，一種更為有效的方法是通過 <img> 標簽的 height 和 width 屬性來指定圖像的尺寸。這樣的話，瀏覽器在下載圖像之前就為其預留出了位置，從而可以加速文檔的顯示，還可以避免文檔內容的移動。這兩個屬性都要求是整數值，並以像素為單位來表示圖像尺寸。這兩個屬性在 <img> 標簽中出現的次序並不重要。
height 和 width 屬性的問題
雖然 <img> 標簽的 height 和 width 屬性能夠改善性能並讓你實現一些小技巧，但在使用它們時還是有一些棘手的負面效果。即使用戶已經關掉了自動下載圖像的功能，瀏覽器還是要把為圖像預留的空間以指定的尺寸顯示出來。而這樣留給讀者的通常是一個空的框架，里面有一個毫無意義的圖標，表示這是放置圖像的位置。這時頁面將看上去非常糟糕，就像根本沒有完成一樣，並且大部分內容都毫無用處。如果不用這些指定的尺寸，則瀏覽器將只是在文本中放置一個圖像圖標，這樣顯示中至少還有一些文字可以閱讀。
對於這個問題我們還沒有解決方案，只能強調一點，就是去使用 alt 屬性和一些描述性文字，這樣讀者至少知道這里缺少的是什么東西。我們還是建議您使用這些尺寸屬性，因為我們鼓勵一切能夠改善網絡性能的行為。