影象寬度和高度
注: 在寬度和高度屬性不會過時的圖片,從來沒有過。儘管如此,他們的使用已經變得更加嚴格。
可以使用影象標記的 width
和 height
屬性指定影象的尺寸:
<img src="images/200x200-img.png" width="200" height="200" alt="A 200x200 image">
通過指定影象的 width
和 height
,即使你只是指定實際影象大小,你的結構也會向瀏覽器提供有關如何佈置頁面的提示。如果未指定影象尺寸,瀏覽器將需要在載入影象後重新計算頁面的佈局,這可能導致頁面在載入時跳轉。
Version <= 4.1
你可以使用 CSS 畫素數或影象實際尺寸的百分比為影象指定寬度和高度。
這些例子都是有效的:
<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
Version >= 五
必須以 CSS 畫素指定影象的寬度和高度; 百分比值不再是有效值。同樣,如果指定了兩個屬性,它們必須適合保持縱橫比的三個公式之一 。儘管有效,但不應使用 width 和 height 屬性將影象拉伸到更大的尺寸。
這些例子是有效的:
<img src="images/50x50-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/200x200-img.png" width="50" height="50" alt="A 50x50 image">
<img src="images/50x50-img.png" width="0" height="0" alt="A hidden tracking image">
不建議使用此示例:
<img src="images/50x50-img.png" width="200" height="200" alt="A 200x200 image">
這些示例無效:
<img src="images/200x200-img.png" width="50%" height="50%" alt="A 100x100 image">
<img src="images/200x200-img.png" width="1" height="200" alt="A 1x200 image">