HTMLImageElement: height プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
height
は HTMLImageElement
インターフェイスのプロパティで、画像が画面やプリンターなどの視覚媒体に描画または表示される場合は CSS ピクセルで、それ以外は画像のピクセル密度補正後の高さを表します。
値
画像の高さを表す整数値です。高さがどのように定義されるかは、画像が視覚的媒体にレンダリングされるかどうかに依存します。
- 画像が画面やプリンターなどの視覚媒体にレンダリングされる場合、高さは CSS ピクセルで表現されます。
- それ以外の場合、画像の高さは、
naturalHeight
で示される表示密度用に調整された自然の(固有の)高さで表わされます。
例
HTML
具体的には、幅 400px までのビューポートでは、 200px の幅で描画されます。 それ以外の場合は、 300px で描画されます。
html
<p>画像の高さ: <span class="size">?</span>px (リサイズで更新)</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);
結果
この例は独自のウィンドウで試してみるとわかりやすいかもしれません。
仕様書
Specification |
---|
HTML Standard # dom-img-height-dev |
ブラウザーの互換性
BCD tables only load in the browser