A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/API/HTMLImageElement/height below:

HTMLImageElement: height プãƒãƒ‘ティ - Web API

HTMLImageElement: height プロパティ

Baseline Widely available

height は HTMLImageElement インターフェイスのプロパティで、画像が画面やプリンターなどの視覚媒体に描画または表示される場合は CSS ピクセルで、それ以外は画像のピクセル密度補正後の高さを表します。

値

画像の高さを表す整数値です。高さがどのように定義されるかは、画像が視覚的媒体にレンダリングされるかどうかに依存します。

例

この例では、 srcset 属性を使って、時計の画像に 2 種類の大きさの画像を用意しています。ひとつは幅 200px、もうひとつは幅 400px です。さらに、 sizes 属性は、ビューポートの幅を考慮して画像を描画する幅を指定するために提供されています。

HTML

具体的には、幅 400px までのビューポートでは、 200px の幅で描画されます。 それ以外の場合は、 300px で描画されます。

<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 を見て、現在描画されている幅から画像の高さを決定しています。

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);
結果

この例は独自のウィンドウで試してみるとわかりやすいかもしれません。

仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4