Erkennen von Bildbreite über JavaScript, wenn maxWidth verwendet wird

Question

diesen Code vor:

var img = new Image(); 

img.onload = function() { 
    console.log(this.width); 
}; 

img.src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/800px-Gull_portrait_ca_usa.jpg'; 

document.body.appendChild(img); 

Dadurch wird die Bildbreite (800) korrekt ausdrucken. Aber wenn ich einen max-width mit CSS anwenden:

img {max-width: 400px} 

Testfall: http://jsfiddle.net/MSjnM/

Der oben JS-Code wird stattdessen 400 ausdrucken. Das ist ein wenig verwirrend, da man denken könnte, dass das width Attribut die ursprüngliche Bildbreite repräsentiert, nicht die berechnete Breite.

Nun zu etwas noch verwirrender, wenn ich das Bild im onload-Ereignis nach der Breitenerkennung anhängen bekomme ich ein anderes Ergebnis:

var img = new Image(); 

img.onload = function() { 
    console.log(this.width); 
    document.body.appendChild(img); 
}; 

img.src = 'http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Gull_portrait_ca_usa.jpg/800px-Gull_portrait_ca_usa.jpg'; 

Testfall: http://jsfiddle.net/MSjnM/2/

Dieses heraus gedruckt wird 800 stattdessen, obwohl das CSS angewendet wurde. Ich nehme an, es ist, weil das Bild angehängt ist nach Ich erkannte die Breite und dass die maximale Breite angewendet wird, sobald das Bild in das DOM eingefügt wird.

OK, also, wenn ich die ursprüngliche Bildgröße erhalten möchte, egal wann oder ob das IMG Element in das DOM eingefügt wird oder welche CSS Stile angewendet wurden, wie würde ich das ausfallsicher machen?

Answer 1

Für mich: in IE9, Opera, Safari (PC), FF und Chrom die naturalWidth/naturalHeight -properties Rück die gewünschte Werte

http://jsfiddle.net/MSjnM/5/

Answer 2

Laden Sie das Bild unabhängig in ein neues Image-Objekt und gibt die Breite erhalten:

var img = new Image(); 
img.src = 'http://placehold.it/350x150' 
console.log(img.width);