HTMLImageElement: naturalHeight-Eigenschaft

Ein ganzzahliger Wert, der die intrinsische Höhe des Bildes in CSS-Pixeln angibt. Dies ist die Höhe, in der das Bild natürlich gezeichnet wird, wenn kein Zwang oder spezifischer Wert für das Bild festgelegt ist. Diese natürliche Höhe ist im Gegensatz zur height für die Pixeldichte des Geräts, auf dem sie angezeigt wird, korrigiert.

Wenn die intrinsische Höhe nicht verfügbar ist – entweder weil das Bild keine intrinsische Höhe angibt oder die Bilddaten nicht verfügbar sind, um diese Information zu erhalten, gibt naturalHeight den Wert 0 zurück.

Dieses Beispiel zeigt sowohl die natürliche, dichtekorrigierte Größe eines Bildes als auch dessen durch das CSS der Seite und andere Faktoren veränderte Größe.

<div class="box">
  <img
    src="/en-US/docs/Web/HTML/Element/img/clock-demo-400px.png"
    class="image"
    alt="A round wall clock with a white dial and black numbers" />
</div>
<pre></pre>

Das HTML enthält ein Bild mit 400x398 Pixeln, welches in einem <div> platziert ist.

.box {
  width: 200px;
  height: 200px;
}

.image {
  width: 100%;
}

Das Hauptmerkmal im obigen CSS ist, dass der Stil für den Container, in dem das Bild gezeichnet wird, 200px breit ist und das Bild so gezeichnet wird, dass es seine Breite (100%) ausfüllt.

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
`;
});

Der JavaScript-Code gibt die natürliche und die angezeigte Größe in ein <pre> aus. Dies geschieht als Reaktion auf den load-Ereignishandler des Bildes, um sicherzustellen, dass das Bild verfügbar ist, bevor versucht wird, seine Breite und Höhe zu untersuchen.