ACTUALIZACIÓN IMPORTANTE: 21/12/15
Actualmente hay un error en Mozilla que descubrí que rompe la barra de navegación en ciertos anchos del navegador con MUCHOS DEMOS EN ESTA PÁGINA . Básicamente, el error de mozilla incluye el relleno izquierdo y derecho en el enlace de la marca de la barra de navegación como parte del ancho de la imagen. Sin embargo, esto se puede solucionar fácilmente y lo he probado y estoy bastante seguro de que es el ejemplo de trabajo más estable en esta página. Se redimensionará automáticamente y funciona en todos los navegadores.
Simplemente agregue esto a su CSS y use la marca de la barra de navegación de la misma manera que lo haría .img-responsive. Tu logotipo se ajustará automáticamente
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
Otra opción es usar una imagen de fondo. Use una imagen de cualquier tamaño y luego simplemente configure el ancho deseado:
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
RESPUESTA ORIGINAL A CONTINUACIÓN (solo para referencia)
La gente parece olvidarse mucho del ajuste de objetos. Personalmente, creo que es el más fácil para trabajar porque la imagen se ajusta automáticamente al tamaño del menú. Si solo usa el ajuste de objeto en la imagen, se redimensionará automáticamente a la altura de los menús.
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
Se señaló que esto no funciona en IE "todavía". Hay un polyfill , pero eso podría ser excesivo si no planea usarlo para otra cosa. Parece que el ajuste de objetos se está planificando para una futura versión de IE, por lo que una vez que eso suceda, funcionará en todos los navegadores.
Sin embargo, si observa la clase .img-responsive en bootstrap, max-width está asumiendo que está colocando estas imágenes en columnas o algo que tiene un conjunto explícito. Esto significaría que 100% significa específicamente 100% de ancho del elemento padre.
.img-responsive
max-width: 100%;
height: auto;
}
La razón por la que no podemos usar eso con la barra de navegación es porque el padre (.navbar-brand) tiene una altura fija de 50 px, pero el ancho no está establecido.
Si tomamos que la lógica y revertir que sea sensible basado en la altura podemos tener una imagen sensible que las escalas a la altura .navbar-marca y añadiendo y ajuste automático de ancho se ajustará a la proporción.
max-height: 100%;
width: auto;
Por lo general, tendríamos que agregar display:block;al escenario, pero dado que navbar-brand ya tiene flotante: izquierda; aplicado a él, actúa automáticamente como un elemento de bloque.
Es posible que se encuentre con una situación poco frecuente en la que su logotipo es demasiado pequeño. El enfoque sensible a img no tiene esto en cuenta, pero lo haremos. Al agregar también el atributo "altura" .navbar-brand > img, puede estar seguro de que aumentará o disminuirá.
max-height: 100%;
height: 100%;
width: auto;
Entonces, para completar esto, los puse juntos y parece funcionar perfectamente en todos los 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" />: ajustar