图像宽度和高度
注: 在宽度和高度属性不会过时的图片,从来没有过。尽管如此,他们的使用已经变得更加严格。
可以使用图像标记的 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">