HTMLImageElement：naturalHeight 属性

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本中使用。它已在浏览器中可用，自 2015 年 7 月.

HTMLImageElement 接口的naturalHeight 属性是一个只读值，它返回图像的内在（自然）、密度校正后的高度，以CSS 像素 为单位。

这是在没有任何限制其高度的情况下绘制图像的高度；如果您未为图像指定高度，或将图像放置在限制或明确指定图像高度的容器内，则它将呈现此高度。

注意：大多数情况下，自然高度是服务器发送的图像的实际高度。但是，浏览器可以在将图像推送到渲染器之前对其进行修改。例如，Chrome 降低低端设备上图像的分辨率。在这种情况下，naturalHeight 会将浏览器干预修改后的图像高度视为自然高度，并返回此值。

值

一个整数，表示图像的内在高度（以 CSS 像素为单位）。当没有为图像建立约束或特定值时，这是图像自然绘制的高度。与height 不同，此自然高度已针对呈现它的设备的像素密度进行了校正。

如果内在高度不可用——要么是因为图像未指定内在高度，要么是因为图像数据不可用于获取此信息，则naturalHeight 返回 0。

示例

此示例显示了图像的自然密度调整大小及其由页面 CSS 和其他因素更改的呈现大小。

HTML

html
<div class="box">
  <img
    src="/en-US/docs/Web/HTML/Element/img/clock-demo-400px.png"
    class="image"
    alt="A round wall clock with a white dial and black numbers" />
</div>
<pre></pre>

HTML 包含一个 400x398 像素的图像，该图像放置在<div> 内。

CSS

css
.box {
  width: 200px;
  height: 200px;
}

.image {
  width: 100%;
}

上面 CSS 中需要注意的主要内容是，用于绘制图像的容器的样式宽度为 200px，并且图像将绘制以填充其宽度 (100%)。

JavaScript

js
const output = document.querySelector("pre");
const image = document.querySelector("img");

image.addEventListener("load", (event) => {
  const { naturalWidth, naturalHeight, width, height } = image;
  output.textContent = `
Natural size: ${naturalWidth} x ${naturalHeight} pixels
Displayed size: ${width} x ${height} pixels
`;
});

JavaScript 代码将自然大小和显示大小转储到<pre> 中。这是在图像的load 事件处理程序的响应中完成的，以确保在尝试检查其宽度和高度之前图像可用。

结果

规范

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

浏览器兼容性

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