html width 和 height属性详解

在HTML中，width和height属性主要用于<img>元素以及<canvas>、<embed>、<object>、<video>和<input type="image">等元素，以指定元素的宽度和高度。这些属性定义了元素在页面上的显示尺寸。以下是这些属性的详细解释：

<img>元素的width和height属性

对于<img>元素，width和height属性用于指定图像的显示尺寸。这两个属性都是可选的，但如果你提供了它们，浏览器会尝试按照指定的尺寸来显示图像。

<img src="example.jpg" width="500" height="300" alt="示例图片">

在这个例子中，图像将尝试以500像素宽和300像素高的尺寸显示。但请注意，如果图像的原始尺寸与指定的尺寸不匹配，图像可能会显得拉伸或压缩。为了避免这种情况，你可以只指定一个尺寸（宽度或高度），而让浏览器自动计算另一个尺寸以保持图像的原始宽高比。

自动缩放

如果你只指定了width或height中的一个属性，浏览器会按照图像的原始宽高比自动计算另一个尺寸。

<img src="example.jpg" width="500" alt="示例图片"> <!-- 高度将自动计算 -->

或者

<img src="example.jpg" height="300" alt="示例图片"> <!-- 宽度将自动计算 -->

<canvas>元素的width和height属性

对于<canvas>元素，width和height属性定义了画布（canvas）的像素尺寸。这些属性必须在任何绘图操作之前设置，因为一旦画布被绘制，它的尺寸就不能再更改。

<canvas id="myCanvas" width="500" height="300"></canvas>

<video>和<audio>元素的width和height属性

对于<video>元素，width和height属性定义了视频播放器的显示尺寸。然而，请注意，这些属性并不会改变视频的实际尺寸或宽高比。如果指定的尺寸与视频的实际尺寸不匹配，视频可能会显得拉伸或压缩。对于<audio>元素，这些属性通常不被使用，因为音频没有视觉表示。

<embed>和<object>元素的width和height属性

<embed>和<object>元素通常用于嵌入外部内容（如Flash动画、PDF文件等）。width和height属性定义了这些内容的显示尺寸。然而，具体的行为可能取决于嵌入的内容类型以及浏览器的支持情况。

注意事项

• 使用width和height属性时，应始终提供有效的数字值，单位为像素（px）。
• 如果你不提供这些属性，浏览器可能会使用元素的默认尺寸或根据其内容自动计算尺寸。
• 过度拉伸或压缩图像可能会导致图像质量下降或失真。因此，在指定尺寸时应尽量保持图像的原始宽高比。