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 |
瀏覽器相容性
載入中…