AGGIORNAMENTO IMPORTANTE: 21/12/15
Attualmente c'è un bug in Mozilla che ho scoperto che rompe la barra di navigazione su determinate larghezze del browser con MOLTE DEMO IN QUESTA PAGINA . Fondamentalmente il bug di mozilla include l'imbottitura sinistra e destra sul collegamento del marchio della barra di navigazione come parte della larghezza dell'immagine. Tuttavia, questo può essere risolto facilmente e l'ho provato e sono abbastanza sicuro che sia l'esempio di lavoro più stabile in questa pagina. Si ridimensionerà automaticamente e funziona su tutti i browser.
Basta aggiungere questo al tuo CSS e utilizzare navbar-brand nello stesso modo in cui lo faresti .img-responsive. Il tuo logo si adatterà automaticamente
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
Un'altra opzione è quella di utilizzare un'immagine di sfondo. Usa un'immagine di qualsiasi dimensione e poi imposta la larghezza desiderata:
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
RISPOSTA ORIGINALE SOTTO (solo come riferimento)
Le persone sembrano dimenticare molto l'adattamento agli oggetti. Personalmente penso che sia il più semplice con cui lavorare perché l'immagine si adatta automaticamente alle dimensioni del menu. Se usi solo l'oggetto adattato sull'immagine, verrà ridimensionato automaticamente all'altezza del menu.
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
È stato sottolineato che questo non funziona in IE "ancora". C'è un polifill , ma potrebbe essere eccessivo se non prevedi di usarlo per qualcos'altro. Sembra che si stia pianificando un adattamento degli oggetti per una versione futura di IE, quindi una volta che ciò accadrà funzionerà in tutti i browser.
Tuttavia, se noti la classe .img-responsive in bootstrap, la larghezza massima presuppone che tu stia mettendo queste immagini in colonne o qualcosa che ha un esplicito con set. Ciò significherebbe che il 100% indica in modo specifico la larghezza del 100% dell'elemento principale.
.img-responsive
max-width: 100%;
height: auto;
}
Il motivo per cui non possiamo usarlo con la barra di navigazione è perché il genitore (.navbar-brand) ha un'altezza fissa di 50px, ma la larghezza non è impostata.
Se prendiamo quella logica e la invertiamo in modo da rispondere in base all'altezza, possiamo avere un'immagine reattiva che si ridimensiona all'altezza del marchio .navbar e aggiungendo e impostando automaticamente la larghezza, si adatterà alla proporzione.
max-height: 100%;
width: auto;
Di solito dovremmo aggiungere display:block;allo scenario, ma poiché il marchio navbar ha già float: left; applicato ad esso, agisce automaticamente come un elemento di blocco.
Potresti imbatterti nella rara situazione in cui il tuo logo è troppo piccolo. L'approccio img-responsive non ne tiene conto, ma lo faremo. Aggiungendo anche l'attributo "height" al .navbar-brand > imgsi può essere certi che si ridimensionerà e diminuirà.
max-height: 100%;
height: 100%;
width: auto;
Quindi, per completare questo, li metto entrambi insieme e sembra funzionare perfettamente in tutti i browser.
<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" />: regolare