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