如何在 HTML 页面中使用图像高度和宽度属性？

在 HTML 页面中，通过使用 <img> 标签可以插入图像。而当我们需要控制图像的大小时，可以使用 height 和 width 属性。

height 和 width 属性

height 属性可用于定义图像的像素高度，而 width 属性则可用于定义图像的像素宽度。这两个属性都可以被指定为正整数值，单位为像素。

例如，以下代码将会显示一个宽度为 400 像素，高度为 300 像素的图像：

<img src="image.jpg" width="400" height="300" alt="My Image">

可选的像素单位

height 和 width 属性设置可以使用可选的像素单位 px。

例如，以下代码将会显示一个宽度为 400 像素，高度为 300 像素的图像：

<img src="image.jpg" width="400px" height="300px" alt="My Image">

使用百分比控制图像大小

height 和 width 属性还可以接受百分比值。在这种情况下，图像的大小将基于包含该图像的元素的大小进行相对缩放。

例如，以下代码将会显示一个宽度为其父元素 50% 宽度，高度为 200 像素的图像：

<!-- 父元素有800像素宽度，则图像会有400像素宽度 -->
<div style="width: 800px">
  <img src="image.jpg" width="50%" height="200" alt="My Image">
</div>

等比例缩放图像

在指定 height 或 width 属性时，如果仅指定其中一个属性（即保留另一个属性为空或不设置），浏览器将自动根据图像的原始比例来计算相应的缺失属性值，从而保持图像的比例不变（等比例缩放）。

例如，以下代码将会显示一个宽度为 400 像素的图像，并自动计算出与原始图像等比例的高度：

<img src="image.jpg" width="400" alt="My Image">

通过 CSS 控制图像大小

除了使用 height 和 width 属性外，还可以使用 CSS 的 height 和 width 属性来控制图像的大小。这种方法的优点是可以将图像大小样式集中在一个地方进行管理。

例如，以下 CSS 规则将针对所有 <img> 元素将其最大宽度限制为 100%：

img {
  max-width: 100%;
}

总结

以上是在 HTML 页面中使用图像高度和宽度属性的方法。我们可以通过 height 和 width 属性来控制图像的大小，还可以使用百分比和 CSS 属性对图像进行缩放。