2016-06-21 13 views
0

Wenn ich ein Bild mit den Attributen width und height habe, überschreibt meine CSS diese Attribute, aber wenn ich Inline-Stile mit Breite und Höhe habe, überschreibt meine externe CSS nicht die Inline-Stile. Warum?CSS überschreiben Breite und Höhe Attribut. Warum?

Beispielcode ohne Zusatz von CSS:

<img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" />

Beispielcode mit zusätzlichen CSS:

.pic { 
 
    width: auto; 
 
    height: auto; 
 
}
<img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" width="100" height="100" />

Beispielcode mit i nline Stil:

.pic { 
 
    width: auto; 
 
    height: auto; 
 
}
<img class="pic" src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" style="width: 100px; height: 100px" />

+0

Ich verstehe das. Meine Frage war eher darauf ausgerichtet, warum externes CSS Inline-Attribute überschreibt. – Anthony

+2

Das ist interessant. Ich würde dieses Verhalten wünschen, obwohl Sie sonst nie in der Lage wären, die Größe des Bildes extern für css Medienanfragen, usw. anzupassen. Eine Höhe und eine Breite attr reserviert den Platz im Browser, also ich denke, dass Sie Ihren haben können Kuchen und es auch essen. –

+0

Meine Annahme ist, dass es die Attribute als nicht inline-CSS schreibt, dann kommt das externe CSS nach und überschreibt den CSS-Attributselektor. – Anthony

Antwort

0

Für Zwang einer Eigenschaft wie "Breite" verwendet, um direkt im HTML-Tag auf diese Weise "div style =" width: 100" ist notwendig, dass Sie setzen wichtig nach Ihr CSS-Code, zum Beispiel so etwas:

.pic { 
    width: auto!important; 
    height: auto!important; 
} 
+1

Danke für die Antwort. Ich bin mir dessen bereits bewusst. Es wird auch nicht empfohlen, dies zu tun, es sei denn, dies ist absolut notwendig. Meine Frage war mehr darauf ausgerichtet: Warum überschreibt externes CSS Inline-Attribute? – Anthony