2016-05-08 7 views
0

Ich baue ein plugin für websites (WP zum beispiel) und ich muss die css-eigenschaften width und height für img elements in meinem plugin aufheben Vermeiden Sie Auswirkungen von Websites CSS (Themen CSS).annullieren css property width und height für img (kann nicht "auto" verwenden)

Ich kann nicht "auto" verwenden, weil das Verhalten ein bisschen anders ist. Browser ignorieren in diesem Fall die HTML-Attribute width und height, aber ich brauche das Element in der richtigen Größe, während das Bild noch geladen wird.

Wenn ich css Eigenschaften Breite und Höhe explizit über Javascript - basierend auf den Werten der HTML-Attribute - einige Browser (FF & IE) ignorieren dies während des Ladevorgangs sowieso (weiß nicht warum).

In diesem Fall wird der folgende Code-Schnipsel:

var img = document.getElementsByTagName('img')[0]; 
img.style.width = '100px'; 
img.style.height = '100px'; 
console.log(img.style.width); 
console.log(img.offsetWidth); 

gibt das folgende in FF und IE:

100px 
0 

Irgendwelche Ideen?

Dank, Helmut

+0

Wollen Sie die Inline-Breite und Höhe Deklarationen eines Bildes entfernen? – Terry

+0

Fragen Sie, wie die Größenattribute entfernt werden, oder warum sie ausgibt, was sie tut? –

+0

Wenn das Bild oder ein Vorfahre 'display: none' hat, erhalten Sie das Verhalten, das Sie beschreiben: https://jsfiddle.net/t7mskqr2/ –

Antwort

0

Nun, könnten Sie einen Elternteil div für dieses Bild mit einer Breite und Höhe 100px und legen Sie dann die Bildbreite und Höhe 100% machen.
Dies sollte funktionieren.

Verwandte Themen