HTMLImageElement: naturalHeight 属性
HTMLImageElement 接口的 naturalHeight 属性是一个只读值，它返回图像的固有（自然）、经过密度校正后的高度，单位是 CSS 像素。
这是图像在没有任何高度限制时绘制出来的高度；如果您没有为图像指定高度，或者将图像放置在一个限制或明确指定图像高度的容器内，它将以这个高度进行渲染。
注意： 大多数情况下，固有高度就是服务器发送的图像的实际高度。然而，浏览器可能会在将图像推送到渲染器之前对其进行修改。例如，Chrome 在低端设备上降低图像分辨率。在这种情况下，naturalHeight 将会考虑这些浏览器干预修改后的图像高度作为固有高度，并返回该值。
值
一个整数值，指示图像的固有高度（以 CSS 像素为单位）。这是图像在未设定限制或特定值时自然绘制的高度。与 height 不同，这个自然高度会根据显示它的设备的像素密度进行校正。
如果固有高度不可用——无论是由于图像未指定固有高度，还是由于无法获取图像数据来获得此信息——naturalHeight 将返回 0。
示例
此示例显示了图像的自然、经过密度调整的大小以及受页面 CSS 和其他因素影响的渲染大小。
HTML
html
<div class="box">
<img
src="/en-US/docs/Web/HTML/Reference/Elements/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 |
浏览器兼容性
加载中…