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.

Beispiel ansehen …

  function analyseImage () { 
    let image = document.querySelector('img');
    document.querySelector('output').textContent = 
       ' Höhe:  ' + image.height + 'px \n' +
       ' Breite: ' + image.width + 'px \n' +
       ' orig. Höhe:  ' + image.naturalHeight + 'px \n' +
       ' orig. Breite: ' + image.naturalWidth + 'px \n';
  }

Das Beispiel enthält eine Grafik, die mit querySelector('img') selektiert wird. Die ursprüngliche Bildgröße wurde skaliert. Mit einem Klick auf den Button können Sie die dargestellte und die tatsächliche Breite erfahren.