HTMLImageElement: height 屬性
HTMLImageElement 介面的 height 屬性指示影像被繪製時的高度，以 CSS 畫素 為單位（如果影像正在被繪製或渲染到任何視覺媒介，例如螢幕或印表機）；否則，它是影像的自然、經過畫素密度校正的高度。
值
一個表示影像高度的整數值。高度的定義方式取決於影像是否正在被渲染到視覺媒介。
- 如果影像正在被渲染到視覺媒介，例如螢幕或印表機，則高度以 CSS 畫素 為單位表示。
- 否則，影像的高度使用其自然（內在）高度表示，並根據
naturalHeight指示的顯示密度進行調整。
示例
在此示例中，使用 srcset 屬性為時鐘影像提供了兩種不同的尺寸。一種是 200 畫素寬，另一種是 400 畫素寬。此外，還提供了 sizes 屬性來指定給定視口寬度時應繪製圖像的寬度。
HTML
具體來說，對於寬度高達 400 畫素的視口，影像將以 200 畫素的寬度繪製；否則，將以 300 畫素的寬度繪製。
html
<p>Image height: <span class="size">?</span>px (resize to update)</p>
<img
src="/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png"
alt="Clock"
srcset="
/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png 200w,
/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png 400w
"
sizes="(width <= 400px) 200px, 300px" />
JavaScript
JavaScript 程式碼會檢視 height 以確定影像在當前繪製寬度下的高度。
js
const clockImage = document.querySelector("img");
let output = document.querySelector(".size");
const updateHeight = () => {
output.innerText = clockImage.height;
};
updateHeight();
window.addEventListener("resize", updateHeight);
結果
這個示例可能更容易 在自己的視窗中 嘗試。
規範
| 規範 |
|---|
| HTML # dom-img-height-dev |
瀏覽器相容性
載入中…