WICHTIGES UPDATE: 21.12.15
Derzeit ist in Mozilla ein Fehler aufgetreten, der die Navigationsleiste bei bestimmten Browserbreiten mit VIELEN DEMOS AUF DIESER SEITE beschädigt . Grundsätzlich umfasst der Mozilla-Fehler das Auffüllen der linken und rechten Seite des Navbar-Markenlinks als Teil der Bildbreite. Dies kann jedoch leicht behoben werden, und ich habe dies getestet und bin mir ziemlich sicher, dass es das stabilste Arbeitsbeispiel auf dieser Seite ist. Die Größe wird automatisch geändert und funktioniert in allen Browsern.
Fügen Sie dies einfach Ihrem CSS hinzu und verwenden Sie die Marke navbar auf die gleiche Weise wie Sie .img-responsive. Ihr Logo passt automatisch
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
Eine andere Möglichkeit ist die Verwendung eines Hintergrundbildes. Verwenden Sie ein Bild beliebiger Größe und stellen Sie dann einfach die gewünschte Breite ein:
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
ORIGINAL ANTWORT UNTEN (nur als Referenz)
Die Leute scheinen die Objektanpassung oft zu vergessen. Persönlich denke ich, dass es am einfachsten ist, damit zu arbeiten, da sich das Bild automatisch an die Menügröße anpasst. Wenn Sie nur die Objektanpassung für das Bild verwenden, wird die Größe automatisch auf die Menühöhe angepasst.
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
Es wurde darauf hingewiesen, dass dies im IE "noch" nicht funktioniert. Es gibt eine Polyfüllung , die jedoch möglicherweise übermäßig ist, wenn Sie sie nicht für andere Zwecke verwenden möchten. Es sieht so aus, als ob für eine zukünftige Version von IE eine Objektanpassung geplant ist. Sobald dies geschieht, funktioniert dies in allen Browsern.
Wenn Sie jedoch die .img-responsive Klasse im Bootstrap bemerken, geht die maximale Breite davon aus, dass Sie diese Bilder in Spalten oder in etwas einfügen, das explizit mit set versehen ist. Dies würde bedeuten, dass 100% spezifisch 100% Breite des übergeordneten Elements bedeutet.
.img-responsive
max-width: 100%;
height: auto;
}
Der Grund, warum wir das mit der Navigationsleiste nicht verwenden können, ist, dass das übergeordnete Element (Marke .navbar) eine feste Höhe von 50 Pixel hat, die Breite jedoch nicht festgelegt ist.
Wenn wir diese Logik verwenden und sie umkehren , um basierend auf der Höhe zu reagieren, können wir ein ansprechendes Bild erhalten, das auf die Höhe der .navbar-Marke skaliert und durch Hinzufügen und automatisches Einstellen der Breite an die Proportionen angepasst wird.
max-height: 100%;
width: auto;
Normalerweise müssten wir display:block;das Szenario ergänzen , aber da die Marke navbar bereits float hat: left; Wenn es darauf angewendet wird, fungiert es automatisch als Blockelement.
Es kann vorkommen, dass Ihr Logo zu klein ist. Der img-responsive Ansatz berücksichtigt dies nicht, aber wir werden es tun. Wenn Sie dem Attribut "height" hinzufügen .navbar-brand > img, können Sie sicher sein, dass es sowohl vergrößert als auch verkleinert wird.
max-height: 100%;
height: 100%;
width: auto;
Um dies zu vervollständigen, habe ich beide zusammengestellt und es scheint in allen Browsern perfekt zu funktionieren.
<style type="text/css">
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 auto;
/* probably not needed anymore, but doesn't hurt */
-o-object-fit: contain;
object-fit: contain;
}
</style>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<img src="logo.png" width="27px" />: anpassen