HTML图像的宽度和高度属性

Question

我真的很简单的问题，我希望能看到一些伟大的建议:-)

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

<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高度。如果指定宽度，它将保持宽高比。所以，如果你想显示在150像素X 100像素的图像，你可以使用

<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中，您应该指定尺寸（以像素为单位）。