![Bootstrap 3 Logo in der Navbar ändern]()
WICHTIGES UPDATE: 12/21/15
Es gibt derzeit einen Bug in Mozilla, den ich entdeckt habe, der die Navbar bei bestimmten Browserbreiten mit VIELEN DEMOS AUF DIESER SEITE zum Absturz bringt. Grundsätzlich beinhaltet der Bug in Mozilla das linke und rechte Padding des Navbar-Branding-Links als Teil der Bildbreite. Dies kann jedoch leicht behoben werden und ich habe dies getestet und bin ziemlich sicher, dass es das stabilste Beispiel auf dieser Seite ist. Es wird automatisch skaliert und funktioniert in allen Browsern.
Fügen Sie einfach dies zu Ihrem CSS hinzu und verwenden Sie navbar-brand genauso wie Sie .img-responsive verwenden würden. Ihr Logo passt automatisch
.navbar-brand {
padding: 0px; /* Firefox-Bugbehebung */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* Firefox-Bugbehebung */
width: auto;
}
Eine weitere Option ist die Verwendung eines Hintergrundbilds. Verwenden Sie ein Bild beliebiger Größe und legen Sie dann die gewünschte Breite fest:
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
URSPRÜNGLICHE ANTWORT UNTEN (nur zur Referenz)
Viele Leute vergessen oft das object-fit. Persönlich denke ich, dass es das einfachste ist, damit zu arbeiten, weil das Bild automatisch an die Menügröße angepasst wird. Wenn Sie object fit einfach auf das Bild anwenden, wird es automatisch auf die Höhe des Menüs skaliert.
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
Es wurde darauf hingewiesen, dass dies in IE "noch" nicht funktioniert. Es gibt ein Polyfill, aber das könnte übertrieben sein, wenn Sie es nicht für etwas anderes verwenden möchten. Es sieht so aus, als ob object-fit für eine zukünftige Version von IE geplant ist, also wird dies in allen Browsern funktionieren, sobald dies geschieht.
Wenn Sie jedoch die .img-responsive-Klasse in Bootstrap beachten, nimmt das maximale Breite davon an, dass Sie diese Bilder in Spalten oder ähnlichem anordnen, die eine explizite Breite haben. Das würde bedeuten, dass 100% speziell 100% der Breite des übergeordneten Elements bedeutet.
.img-responsive
max-width: 100%;
height: auto;
}
Der Grund, warum wir das mit der Navbar nicht verwenden können, liegt darin, dass das Elternelement (.navbar-brand) eine feste Höhe von 50px hat, aber die Breite nicht festgelegt ist.
Wenn wir diese Logik nehmen und umkehren, um responsiv basierend auf der Höhe zu sein, können wir ein responsives Bild haben, das sich an die Höhe von .navbar-brand anpasst, und durch Hinzufügen und automatisches Setzen der Breite wird es sich proportional anpassen.
max-height: 100%;
width: auto;
Normalerweise müssten wir display:block; zur Situation hinzufügen, aber da .navbar-brand bereits float:left; angewendet hat, wird es automatisch als Block-Element fungieren.
Sie könnten auf die seltene Situation stoßen, dass Ihr Logo zu klein ist. Der img-responsive-Ansatz berücksichtigt dies nicht, aber wir werden es tun. Indem Sie auch das "height"-Attribut zu .navbar-brand > img hinzufügen, können Sie sicher sein, dass es sowohl vergrößert als auch verkleinert wird.
max-height: 100%;
height: 100%;
width: auto;
Um dies abzuschließen, habe ich sie zusammengefügt und es scheint in allen Browsern perfekt zu funktionieren.
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 auto;
/* Wahrscheinlich nicht mehr erforderlich, schadet aber nicht */
-o-object-fit: contain;
object-fit: contain;
}
Navigation umschalten
Home
Über
Kontakt
