JavaScript/DOM/Document/images/naturalWidth

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Document‎ | images
Wechseln zu: Navigation, Suche

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.