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