Wie kann man die Bildgröße (Höhe und Breite) mit JavaScript ermitteln?

Question

Gibt es irgendwelche JavaScript- oder jQuery-APIs oder Methoden, um die Abmessungen eines Bildes auf der Seite zu ermitteln?

Answer 1

Sie können das Bild programmatisch abrufen und die Abmessungen mit Javascript überprüfen...

const img = new Image();
img.onload = function() {
  alert(this.width + 'x' + this.height);
}
img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Dies kann nützlich sein, wenn das Bild nicht Teil des Markups ist.

Answer 2

clientBreite y clientHeight sind DOM-Eigenschaften, die die aktuelle In-Browser-Größe der inneren Dimensionen eines DOM-Elements (ohne margin und border) anzeigen. Im Falle eines IMG-Elements werden so die tatsächlichen Abmessungen des sichtbaren Bildes ermittelt.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

Answer 3

Außerdem (zusätzlich zu den Antworten von Rex und Ian) gibt es:

imageElement.naturalHeight

und

imageElement.naturalWidth

Diese geben die Höhe und Breite der Bilddatei selbst (und nicht nur des Bildelements) an.

Answer 4

Wenn Sie jQuery verwenden und die Bildgrößen abfragen, müssen Sie warten, bis sie geladen sind, sonst erhalten Sie nur Nullen.

$(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
});

Answer 5

Ich halte eine Aktualisierung dieser Antworten für sinnvoll, da eine der am besten bewerteten Antworten vorschlägt, Folgendes zu verwenden clientWidth und clientHeight, die meines Erachtens inzwischen veraltet sind.

Ich habe einige Experimente mit HTML5 durchgeführt, um zu sehen, welche Werte tatsächlich zurückgegeben werden.

Zunächst habe ich ein Programm namens Dash verwendet, um mir einen Überblick über die Bild-API zu verschaffen. Es besagt, dass height y width die gerenderte Höhe/Breite des Bildes sind und dass naturalHeight y naturalWidth sind die eigentliche Höhe/Breite des Bildes (und sind nur HTML5).

Ich habe ein Bild eines schönen Schmetterlings aus einer Datei mit einer Höhe von 300 und einer Breite von 400 verwendet. Und dieses Javascript:

var img = document.getElementById("img1");

console.log(img.height,           img.width);
console.log(img.naturalHeight,    img.naturalWidth);
console.log($("#img1").height(),  $("#img1").width());

Dann habe ich dieses HTML verwendet, mit Inline-CSS für die Höhe und Breite.

<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

Ergebnisse:

/*Image Element*/ height == 300         width == 400
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150

Dann habe ich den HTML-Code wie folgt geändert:

<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />

d.h. Verwendung von Attributen für Höhe und Breite anstelle von Inline-Stilen

Ergebnisse:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() ==  90       width() == 115

/*Actual Rendered size*/     90                  115

Dann habe ich den HTML-Code wie folgt geändert:

<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />

d. h. die Verwendung von Attributen und CSS, um zu sehen, was Vorrang hat.

Ergebnisse:

/*Image Element*/ height ==  90         width == 115
           naturalHeight == 300  naturalWidth == 400
/*Jquery*/      height() == 120       width() == 150

/*Actual Rendered size*/    120                  150