HTML图像宽度和高度属性

Question

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

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

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

或

<img src="..." alt="My Image" width="150" height="100" /> // the desired width and height (also defined in CSS)

Answer 1

您应该将宽度/高度显示为屏幕上的像素大小。

w3schools HTML width attribute documentation

  

如果设置了高度和宽度，则图像所需的空间为   加载页面时保留。但是，没有这些属性，   浏览器不知道图像的大小， 无法保留   适当的空间 。效果将是页面布局   将在加载期间（图像加载时）发生变化。

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

Answer 2

通常人们希望保持图像的宽高比。所以你可以这样做

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

在这种情况下，

将高度增加到100.希望有所帮助。

Answer 3

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

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

或

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

您也可以使用％来指定HTML4中的大小。该测量值跨越其父母总面积的指定百分比。

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

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