Externes Styling wird nicht auf das img-Tag angewendet

Das externe Styling wird nur auf dem Tag img nicht angewendet. Obwohl es auf die anderen Tags in derselben Datei angewendet wird.Externes Styling wird nicht auf das img-Tag angewendet

home.php

<link rel="stylesheet" href="styles.css" type="text/css"/> 
<link rel="stylesheet" href="css/bootstrap.min.css"/> 
<script src="jquery-3.1.0.js"></script> 
<script src="js/bootstrap.min.js" ></script> 
<div class="col-sm-3 thumbnail" style="height: 350px;"> 
    <img src="Images/1000px-Htc_new_logo.svg.png"> 
    <p class="test" > 
     this is just for testing the css link 
    </p> 
</div>

styles.css

img{ 
    height: 300px; 
    width: 100%; 
    border: solid 1px; 
} 
p{ 
    border: solid 1px; 
}

Die p Tag arbeitet absolut in Ordnung

Quelle

2016-07-20 Syed Kumail Haider Naqvi

Nicht sicher, was genau Sie meinen, vielleicht Bootstrap.css überschreibt Ihre styles.css? –

Versuchen Sie, die Reihenfolge der Bootstrap-Elemente bootstrap.min.css und styles.css zu ändern. – Beamer180

Bootstrap überschreibt möglicherweise einige Ihrer Stile. Versuchen Sie, '! Wichtig 'nach Ihren Stilen zu verwenden, um zu sehen, ob es ein vorrangiges Problem oder etwas anderes ist. – Quiver

Fügen Sie Ihren Anbieter CSS (Bootstrap etc), bevor Ihre benutzerdefinierte CSS-Datei (s), damit Sie die Standard-Herstellerstile bei Bedarf überschreiben können.

Quelle

2016-07-20 04:11:56

Jetzt scheint es ein anderes Problem zu geben, dass die Höhe nicht eingestellt wird, aber andere Eigenschaften funktionieren gut. –

Versuchen Sie Firebug oder Konsole zu verwenden, um zu sehen, wo sich die übergeordneten Stile befinden. Es könnte ein Kaskadenproblem sein (Element über ID, ID über Klasse usw.) –

mehr Optionen können Sie versuchen,

1) ein anderes Bild ändern, um einen Versuch zu haben. aber nicht diese verwenden 1000px-Htc_new_logo.svg.png

2) seit Sie mehrere CSS-Dateien geladen haben, können Sie Firebug verwenden, um einen Blick, wenn es einige CSS-Regel override sein.

3) Sie können css mit "! Wichtig" zu Ihrer style.css nur für einen Test hinzugefügt, um zu sehen, ob die externe stying auf das img-Tag angewendet werden kann. Bitte beachten Sie, wichtig ist keine gute Übung, verwenden Sie es einfach zum Debuggen.

img{ 
height: 300px !important; /* just use important for debug */ 
width: 100% !important; /* just use important for debug */ 
border: solid 1px !important; /* just use important for debug */

}

Quelle

2016-07-20 04:20:34

Try und vermeiden Sie! Wichtig es ist nicht die beste Praxis. Es überschreibt den Code überall. Stattdessen sei genauer gesagt, was ich damit meine, fügen Sie diesen Bildern eine Klasse hinzu und ändern dann die Klasseneigenschaften. Wie

img .imageStyling { 
    height: 300px; 
    width: 100%; 
    border: solid 1px; 
}

Quelle

2016-07-20 04:40:52 Alan

Externes Styling wird nicht auf das img-Tag angewendet

Antwort

Verwandte Themen