JavaScript/DOM/Document/images/naturalWidth

Die Eigenschaften naturalWidth und naturalHeight enthalten die originale (oder intrinsische) Größe eines Bildes, auch wenn es auf der Webseite skaliert dargestellt wird.

Beachten Sie:

• nicht jede Grafik besitzt eine intrinsische Größe. Rastergrafiken haben sie, aber bei SVG-Bildern muss das nicht der Fall sein.
• Um die intrinsische Größe abrufen zu können, muss das Bild geladen sein. Es gibt mehrere Gründe, warum das nicht der Fall sein kann. Die Eigenschaft complete des Image-Objekts enthält false, wenn das Bild noch nicht geladen ist.

Beispiel ansehen …

  function analyzeImage (bild) { 
    document.querySelector('output').textContent = 
       `Höhe: ${bild.height}px\n` + 
       `Breite: ${bild.width}px\n` + 
       `orig. Höhe: ${bild.naturalHeight}px\n` + 
       `orig. Breite: ${bild.naturalWidth}px`;
  }

  document.querySelector('#auslesen')
          .addEventListener('click', function() {
             const bild = document.querySelector("img");
             analyzeImage(bild);
          });

Das Beispiel enthält ein Bild, einen Button mit der id "auslesen" und ein output-Element. Wird der Button angeklickt, wird im zugehörigen click-Eventhandler das Bild ermittelt (mit document.querySelector) und an die analyzeImage-Funktion übergeben. Diese Funktion liest die tatsächliche und die natürliche Bildgröße aus und gibt die Werte in dem output-Element aus.

Wenn Sie eine solche Untersuchung direkt nach dem Laden der Seite durchführen möchten, müssen Sie das in einem load-Eventhandler tun. Entweder im load-Event des Bildes, oder im load-Event der Seite. Andernfalls ist die Wahrscheinlichkeit sehr hoch, dass Sie die Eigenschaften abrufen, bevor das Bild fertig geladen ist.