HTML图像宽度和高度属性

我有一个非常简单的问题，我希望能读到一些很棒的建议：-）

宽度和高度属性的正确用法是什么？
假设我需要以以下宽度和高度显示图像：150 x 100像素

<img src="..." alt="My Image" width="300" height="200" /> // the real width and height

//实际宽度和高度

或

//所需的宽度和高度（也在CSS中定义）

您应该在屏幕上以像素为单位显示宽度/高度

如果设置了高度和宽度，则图像所需的空间为 加载页面时保留。但是没有这些属性,， 浏览器不知道图像的大小，无法保留 将适当的空格添加到它。其效果将是页面布局 将在加载过程中更改（图像加载时）

---

图像的实际尺寸不相关。浏览器将相应地进行处理。

通常需要保持图像的纵横比。所以你可以这样做

<img src="..." alt="My Image" width="150"/> 

---

在这种情况下，这将使高度达到100。希望这有帮助。

img标签中的宽度和高度用于以所需大小显示图像。如果我们设置图像的宽度和高度。图像将以指定的宽度和高度显示在网页上。 如果我们想以不同于实际大小的大小显示图像，图像将重新调整到指定的宽度和高度。如果未指定宽度和高度，图像将以实际大小显示。大多数情况下，我们不需要指定img高度。如果指定了宽度，它将保持纵横比。所以，如果您想以150px 100px显示图像，您可以使用

<img src="..." alt="My Image" width="150px" height="100px" />

或

您还可以使用%指定HTML4中的大小。这意味着它跨越了其父对象总面积的特定百分比

 <img src="..." alt="My Image" width="50%" />

---

但在HTML5中，您应该以像素为单位指定尺寸。

define img{vertical align:top；}

<img src="..." alt="My Image" width="150px" />

 <img src="..." alt="My Image" width="50%" />