ATUALIZAÇÃO IMPORTANTE: 21/12/15
Atualmente, há um bug no Mozilla que descobri que quebra a barra de navegação em determinadas larguras do navegador com MUITOS DEMOS NESTA PÁGINA . Basicamente, o bug do mozilla está incluindo o preenchimento esquerdo e direito no link da marca da barra de navegação como parte da largura da imagem. No entanto, isso pode ser corrigido facilmente e eu testei isso e tenho certeza de que é o exemplo de trabalho mais estável nesta página. Ele será redimensionado automaticamente e funcionará em todos os navegadores.
Basta adicionar isso ao seu css e usar navbar-brand da mesma maneira que você faria .img-responsive. Seu logotipo caberá automaticamente
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
Outra opção é usar uma imagem de fundo. Use uma imagem de qualquer tamanho e defina a largura desejada:
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
RESPOSTA ORIGINAL ABAIXO (apenas para referência)
As pessoas parecem esquecer muito o ajuste de objetos. Pessoalmente, acho que é o mais fácil de trabalhar, porque a imagem se ajusta automaticamente ao tamanho do menu. Se você apenas usar o ajuste de objeto na imagem, ele será redimensionado automaticamente para a altura dos menus.
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
Foi apontado que isso não funciona no IE "ainda". Existe um polyfill , mas isso pode ser excessivo se você não planeja usá-lo para qualquer outra coisa. Parece que o ajuste de objeto está sendo planejado para uma versão futura do IE; assim que isso acontecer, funcionará em todos os navegadores.
No entanto, se você notar a classe responsiva .img no bootstrap, a largura máxima está assumindo que você está colocando essas imagens em colunas ou algo que seja explícito com set. Isso significa que 100% significa especificamente 100% de largura do elemento pai.
.img-responsive
max-width: 100%;
height: auto;
}
O motivo pelo qual não podemos usar isso com a barra de navegação é porque o pai (marca .navbar) tem uma altura fixa de 50px, mas a largura não está definida.
Se pegarmos essa lógica e a revertermos para responder com base na altura, poderemos ter uma imagem responsiva que seja dimensionada para a altura da marca .navbar e, adicionando e ajustando automaticamente a largura, ela será ajustada à proporção.
max-height: 100%;
width: auto;
Normalmente teríamos que adicionar display:block;ao cenário, mas como a navbar-brand já possui float: left; aplicado a ele, ele atua automaticamente como um elemento de bloco.
Você pode encontrar a rara situação em que seu logotipo é muito pequeno. A abordagem responsiva ao img não leva isso em consideração, mas faremos. Ao adicionar também o atributo "height" ao, .navbar-brand > imgvocê pode ter certeza de que ele aumentará ou diminuirá.
max-height: 100%;
height: 100%;
width: auto;
Então, para completar, juntei os dois e parece funcionar perfeitamente em todos os navegadores.
<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" />: ajuste