HTMLImageElement：height 属性

基线 广泛可用

此功能已得到充分确立，并且可以在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用： 2015 年 7 月.

height 属性是 HTMLImageElement 接口的一个属性，它指示绘制图像的高度，以 CSS 像素 为单位（如果图像正在绘制或呈现到任何视觉介质，如屏幕或打印机）；否则，它是图像的自然、像素密度校正后的高度。

值

一个整数，表示图像的高度。高度的定义取决于图像是否正在呈现到视觉介质。

  • 如果图像正在呈现到视觉介质（如屏幕或打印机），则高度以 CSS 像素 为单位表示。
  • 否则，图像的高度使用其自然（固有）高度表示，并根据 naturalHeight 指示的显示密度进行调整。

示例

在此示例中，使用 srcset 属性为时钟图像提供了两种不同的尺寸。一个宽度为 200px，另一个宽度为 400px。此外，还提供了 sizes 属性，以指定给定视口宽度的图像绘制宽度。

HTML

具体来说，对于宽度不超过 400px 的视口，图像以 200px 的宽度绘制；否则，以 300px 的宽度绘制。

html
<p>Image height: <span class="size">?</span>px (resize to update)</p>
<img
  src="/en-US/docs/Web/HTML/Element/img/clock-demo-200px.png"
  alt="Clock"
  srcset="
    /en-US/docs/Web/HTML/Element/img/clock-demo-200px.png 200w,
    /en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 400w
  "
  sizes="(max-width: 400px) 200px, 300px" />

JavaScript

JavaScript 代码查看 height 以确定给定当前绘制宽度的图像高度。

js
const clockImage = document.querySelector("img");
let output = document.querySelector(".size");

const updateHeight = (event) => {
  output.innerText = clockImage.height;
};

window.addEventListener("load", updateHeight);
window.addEventListener("resize", updateHeight);

结果

此示例可能更容易在 其自身窗口 中尝试。

规范

规范
HTML 标准
# dom-img-height-dev

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅