css - ejemplos - poner logo en bootstrap

Bootstrap 3 Navbar con Logo

Question

Quiero usar la barra de navegación predeterminada de Bootstrap 3 con un logotipo de imagen en lugar de la marca del texto. ¿Cuál es la forma correcta de hacer esto sin causar problemas con diferentes tamaños de pantalla? Supongo que este es un requisito común, pero aún no he visto un buen ejemplo de código. Un requisito clave distinto de tener una visualización aceptable en todos los tamaños de pantalla es la posibilidad de colapsar el menú en pantallas más pequeñas.

Intenté simplemente poner una etiqueta IMG dentro de la etiqueta A que tiene la clase de la marca navbar, pero eso hizo que el menú no funcionara correctamente en mi teléfono Android. También intenté aumentar la altura de la clase de la barra de navegación, pero eso arruinó las cosas aún más.

Por cierto, mi imagen de logotipo es más grande que la altura de la barra de navegación.

Answer 1

Indique cómo crear una barra de navegación de arranque con un logotipo que sea más grande que la altura predeterminada (50 px):

Ejemplo con un logo de 100px x 100px, CSS estándar:

1. Calcule la altura y (relleno de la parte superior + parte inferior del relleno) del logotipo. Aquí 120px ( 100px altura + relleno superior (10px) + relleno inferior (10px))

2. Ir a bootstrap / personalizar . Configure en lugar de la altura de la barra de navegación 50px> 120px (50 + 70) y navbar-collapse-max-height de 340px a 410px (340 + 70). Descargar css.

3. En este ejemplo uso esta navbar . En la marca navbar :

    <div class="navbar-header">
   ...
   </button>
   <a class="navbar-brand myLogo" href="#">
   <img src="yourLogo.jpg" />
   </a>
   </div>...

   agregue una clase, por ejemplo myLogo , y un img (su logotipo)

   <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a> .

4. Añadir CSS

   .myLogo {relleno: 10px; }

5. Adecuado para otros tamaños.

Example

Answer 2

¿Por qué todos intentan hacerlo de la manera más difícil? Claro, algunos de estos enfoques funcionarán, pero son más complicados de lo necesario.

Bien, primero, necesitas una imagen que se ajuste a tu barra de navegación. Puede ajustar su imagen a través del atributo de altura css (permitiendo el ancho a escala) o simplemente puede usar una imagen del tamaño adecuado. Independientemente de lo que decida hacer, la forma en que se verá dependerá de qué tan bien dimensione su imagen.

Por alguna razón, todos quieren pegar la imagen dentro de un ancla con navbar-brand , y esto no es necesario. navbar-brand aplica estilos de texto que no son necesarios para una imagen, así como la clase navbar-left (como pull-left, pero para usar en una barra de navegación). Todo lo que necesitas es añadir la navbar-left .

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

Incluso puedes seguir esto con un elemento de la marca de la barra de navegación, que aparecerá a la derecha de la imagen.

Answer 3

Al no lograr que ninguna de las otras respuestas funcionara en mi caso (probablemente no pasé la prueba de inteligencia) y después de algunos experimentos, esto es lo que estoy usando (lo que creo que es muy parecido al valor predeterminado de Bootstrap):

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-logo">
<a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
<img src="~/Images/logo.png" class="img-responsive">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
<li>@Html.ActionLink("Resources", "Resources", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
<li>@Html.ActionLink("Blog", "Blog", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
</div>

Y en el archivo CSS he añadido lo siguiente:

.navbar-brand {
padding-top: 5px;
}
.navbar-collapse {
float: left;
}
.navbar-logo {
float: left;
}

Tenga en cuenta que @Html.ActionLink() es una sintaxis de Razor para una etiqueta <a> . Donde dice @Html.ActionLink(...) simplemente reemplácelo con una etiqueta <a> apropiada. Igualmente donde dice @Url.Action(...) reemplazarlo con una URL apropiada (no hay etiqueta <a> en ese caso).

Answer 4

Aunque su pregunta es interesante, no espero que haya una sola respuesta. Tal vez tu pregunta sea demasiado amplia. Su solución debe depender de: otro contenido en la barra de navegación (número de elementos), tamaños de su logotipo, si su logotipo debe ser sensible, etc. Agregar el logotipo en la a (con la marca de la barra de navegación) parece ser un buen punto de partida. Debería usar la clase de la marca navbar porque esto agregará un relleno (arriba / abajo) de 15 píxeles.

Pruebo esta configuración en http://getbootstrap.com/examples/navbar/ con un logotipo de 300x150 píxeles.

Pantalla completa> 1200:

entre 768 y 992 píxeles (menú no colapsado):

<768 (menú colapsado)

Además de los aspectos estéticos no encontré ningún problema técnico. En las pantallas pequeñas, un gran logotipo se superpondrá o tal vez rompa la ventana gráfica. Las pantallas entre 768 y 992 píxeles también tienen otros problemas cuando el contenido no encaja en una línea, vea por ejemplo: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

La barra de navegación predeterminada tiene. El ejemplo de la barra de navegación predeterminada agrega un margen inferior de 30px, por lo que el contenido de su barra de navegación nunca debe superponerse al contenido de su página. (Las barras de navegación fijas tendrán problemas cuando la altura de la barra de navegación varía).

Necesitará algunas consultas de css y medios para adaptar la barra de navegación a sus necesidades en diferentes tamaños de pantalla. Por favor, trate de reducir su pregunta. Se describe el problema que encontraste en Android.

actualización ver http://bootply.com/77512 para un ejemplo.

En pantallas más pequeñas, como un teléfono, el menú contraído aparece sobre el logotipo

intercambie el botón y el logotipo en su código, primero el logotipo (establezca float: izquierda en el logotipo)

No hay manera de alinear los elementos del menú a nada excepto a la parte superior

establece el margin-top para .navbar-collapse ul . Use la altura del logotipo menos la altura de la barra de navegación para alinearla con la parte inferior o (altura del logotipo - altura de la barra de navegación) / 2 para centrar

Answer 5

Bueno, finalmente conseguí que este mismo problema funcionara, esta es mi solución y la probé en mi sitio en los tres navegadores principales: Chrome, Firefox e Internet Explorer.

En primer lugar, si no está utilizando un logotipo basado en texto, elimine "navbar-brand" por completo, ya que esta clase en particular es la causa principal de la duplicación de mi menú de navegación colapsado.

Grita al usuario3137032 por guiarme en la dirección correcta.

Tienes que hacer un contenedor de imágenes de respuesta personalizado, lo llamé "logo"

Aquí está la marca HTML del bootstrap:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="@Url.Action(" About ", "Home ")">
<i class="glyphicon glyphicon-info-sign"></i> About
</a>
</li>
<li>
<a href="@Url.Action(" Contact ", "Home ")">
<i class="glyphicon glyphicon-phone"></i> Contact
</a>
</li>
<li>
<a href="@Url.Action(" Index ", "Products ")">
<i class="glyphicon glyphicon-tag"></i> Products
</a>
</li>
</ul>
</div>
</div>
</div>

Y el código CSS:

.logo img {
width: 100% /9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}
@media (max-width:480px) {
.logo img {
width: 70% /9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70% !important;
}
}
@media (max-width:400px) {
.logo img {
width: 75% /9; /*Force IE10 and below to size SVG images correctly*/
max-width: 75%;
}
}
@media (max-width:385px) {
.logo img {
width: 70% /9; /*Force IE10 and below to size SVG images correctly*/
max-width: 70%;
}
}
@media (max-width:345px) {
.logo img {
width: 65% /9; /*Force IE10 and below to size SVG images correctly*/
max-width: 65%;
}
}
@media (max-width:335px) {
.logo img {
width: 60% /9; /*Force IE10 and below to size SVG images correctly*/
max-width: 60%;
}
}
@media (max-width:325px) {
.logo img {
width: 55% /9; /*Force IE10 and below to size SVG images correctly*/
max-width: 55%;
}
}
@media (max-width:315px) {
.logo img {
width: 50% /9; /*Force IE10 and below to size SVG images correctly*/
max-width: 50%;
}
}

El valor en @media (max-width: x) puede variar dependiendo del ancho de las imágenes de su logotipo, el mío es 368px. Es posible que los porcentajes también deban modificarse según el tamaño de su logotipo. La primera consulta @media debe ser su umbral y el mío fue el ancho de la imagen (368px) + el tamaño del botón colapsado (44px) + aproximadamente 60px y salió a 480px, que es donde comienzo la escala de imagen sensible.

Por favor, asegúrese de eliminar mi sintaxis de afeitar de las partes HTML. Déjame saber si soluciona tu problema, solucionó el mío.

Edición: Lo siento, me perdí su problema de altura de la barra de navegación. Hay un par de maneras de hacerlo, personalmente compilo el Bootstrap MENOS con la altura adecuada de la barra de navegación, para mis propósitos uso 70px, y la altura de mi imagen es de 68 px. La segunda forma de hacerlo es en el propio archivo bootstrap.css, busque ".navbar" y cambie min-height: a la altura de su logotipo.

Answer 6

Debes usar código como este:

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<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="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style=""
src="/img/transparent-white-logo.png">
</a>
</div>

La etiqueta de clase A debe ser "logo" no navbar-brand.

Answer 7

Depende de qué tan alto quieras que sea tu logotipo.

La altura predeterminada <a> en la barra de navegación es 20px, por lo que si especifica la height: 20px en su logotipo, se alineará bien.

Sin embargo, eso es algo pequeño para un logotipo, así que opté por esto:

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<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" rel="home" href="#" title="Brand">
<img style="height: 30px; margin-top: -5px;"
src="/img/brand.png">
</a>
</div>

Esto hace que la imagen tenga una altura de 30 píxeles y la alinea verticalmente agregando un margen negativo en la parte superior (5 píxeles es la mitad de la diferencia entre el relleno en ay el tamaño de la imagen).

Alternativamente, puede cambiar el relleno en el elemento <a> , por ejemplo:

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<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" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
<img style="height: 30px;"
src="/img/transparent-white-logo.png">
</a>
</div>

Answer 8

En lugar de reemplazar la marca de texto, me dividí en dos filas, como en el código a continuación, y le di a la imagen una clase img-responsive a img-responsive ...

<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
<div class="container" style="margin-bottom:-1px;">
<div class="row">
<div class="col-md-3">
<div id="menubar-logo">
<a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
</div>
</div>
<div class=" col-md-offset-3 col-md-6">
<ul class="nav navbar-nav">
<li><a href="index.php" class="active">Home</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</div>
<!-- end of "row" -->
</div>
<!-- end of "container" -->
</div>
<!-- end of "collapse" -->

y además, agregué los siguientes códigos css .......

#menubar-logo img {
margin-top: 10px;
margin-bottom: 20px;
margin-right: 10px;
}

Si mi código resuelve tu problema, es un placer ...

Answer 9

Este código funciona perfectamente si necesita ver la marca centrada y con ancho automático en la barra de herramientas. Contiene la función de Wordpress para obtener el archivo de imagen de la ruta correcta:

<a class="navbar-brand page-scroll" rel="home"
href="#page-top" title="Title">
<img style="height: 100%; width: auto;"
src="<?php echo get_template_directory_uri();?>/img/logo.png">

Answer 10

Esto no es semántico, solo uso el elemento existente, configuro una imagen de fondo, luego creo varias variaciones para @ resolución 2x, tamaños de pantalla más pequeños, etc.

Luego, puede usar la clase .text-hide para obtener un texto en la página de la manera .text-hide . Simple y eficaz aunque no sea el uso adecuado de una imagen.

Aquí hay un enlace a la clase de ayuda para el reemplazo de texto:

http://getbootstrap.com/css/#helper-classes

Answer 11

La respuesta más fácil y mejor para esta pregunta es establecer un ancho y una altura máximos en función de su logotipo, la imagen tendrá un máximo de 50 px de alto pero no más de 200 px.

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

Esto variará según el tamaño de su logotipo y los elementos de la barra de navegación que tenga.

Answer 12

Mi código de trabajo - bootstrap 3.0.3. cuando navbar-toggle, hidden-xs imagen original del logotipo.

 <a class="navbar-brand hidden-xs" href="<?=$g4[''path'']?>/">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
</a>
<a class="navbar-brand navbar-toggle" href="<?=$g4[''path'']?>/" style="border:0;margin-bottom:0;">
<img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
</a>

Answer 13

Mi enfoque es incluir CUATRO imágenes diferentes de diferentes tamaños para teléfonos, tabletas, computadoras de escritorio, computadoras de escritorio grandes, pero solo mostrar UNA utilizando las clases de utilidades sensibles de bootstrap, de la siguiente manera:

<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo(''name''); ?></a>-->
<a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo(''name''); ?> Logo" /></a>
<a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo(''name''); ?> Logo" /></a>
<a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo(''name''); ?> Logo" /></a>
<a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo(''name''); ?> Logo" /></a>

Nota: Puede reemplazar la línea comentada con el código provisto. Reemplace el código php si no está usando wordpress.

Nota de edición 2: Sí, esto agrega solicitudes a su servidor al cargar la página, lo que puede ralentizarse un poco, pero si utiliza una técnica de sprites CSS de fondo, es probable que el logotipo no se imprima al imprimir una página y que el código de arriba deba aparecer. mejor SEO.

Answer 14

Mi solución es agregar css "display: inline-block" a img tag.

<img style="display: inline-block; height: 30px; margin-top: -5px">

DEMO: jsfiddle

Answer 15

No es necesario que agregue CSS adicional, ya que Bootstrap3 lo proporciona. A menos que quieras agregarlo. Este es mi código para poner el logotipo a la izquierda y los enlaces a la derecha. Esta navegación es responsiva. Haz cambios a esto como mejor te parezca.

HTML:

<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
<div class="container">
<a class="navbar-brand" href="#"><img style=" width: 150px;" src="image.jpg" alt="Image text"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
<li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>

Answer 16

Otro enfoque es implementar la clase incorporada .text-hide de .navbar-brand junto .navbar-brand para reemplazar el texto / contenido de la marca con una imagen de fondo.

CSS:

.navbar-brand{
background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
width: 200px;
}

HTML:

<a class="navbar-brand text-hide" href="#">Navbar Brand</a>

Este es un método muy consistente y mantiene tu imagen centrada. Para ajustar el tamaño de la imagen, todo lo que necesita hacer es ajustar el .navbar-brand ya que la altura ya está establecida.

Aquí hay una demostración en vivo

Answer 17

Por favor intente el siguiente código:

<style>
.navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
<img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>

Answer 18

Puede intentar usar la consulta @media como se muestra a continuación.

Agregue una clase de logotipo primero, luego use @media para especificar el alto y ancho de su logotipo por tamaño de dispositivo. En el siguiente ejemplo, estoy apuntando a dispositivos que tienen un ancho máximo de 320px (iPhone). Puedes jugar con esto hasta que encuentres el mejor ajuste. Manera fácil de probar: use chrome o Firefox con el elemento de inspección. Reduce tu navegador en la medida de lo posible. Observe el cambio de tamaño del logotipo en función del ancho de @media max que especifique. Prueba en iPhone, dispositivos Android, iPad, etc. para obtener los resultados deseados.

.logo {
height: 42px;
width: 140px;
}
@media (max-width:320px) {
.logo {
height: 33px;
width: 110px;
}
}

Answer 19

Si usa MENOS, esto funciona:

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;
.navbar-brand img {
height: @navbar-height - @navbar-brand-vpadding * 2;
position: absolute;
top: @navbar-brand-vpadding;
}

Answer 20

Tal vez esto sea demasiado simple, pero simplemente copié la línea de la marca navbar, así que hay dos de ellas, la imagen y luego el texto.

<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>

Y creé una imagen que encaja dentro de la barra de navegación (aproximadamente la mitad de la altura).

Answer 21

También lo implemento a través de la propiedad de fondo css. Funciona saludable en cualquier valor de ancho.

.navbar-brand{
float:left;
height:50px;
padding:15px 15px;
font-size:18px;
line-height:20px;
background-image: url("../images/logo.png");
background-repeat: no-repeat;
background-position: left center
}

Answer 22

Utilizo la clase img-responsive y luego configuro un ancho máximo en el elemento a. Me gusta esto:

<nav class="navbar">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="mylogo.png">
</a>
</div>
</nav>

y el CSS:

.navbar-brand {
max-width: 50%;
}

Answer 23

Yo tuve el mismo problema. Lo resolví así:

<a href="#" class="btn btn-link navbar-btn">
<img class="img-responsive" src="#">
</a>

No hay clase de marca navbar. El resultado se ve como una imagen de logotipo que se ajusta a la barra de navegación y funciona como un enlace. También recomiendo usar la clase de barra de navegación derecha para los elementos del menú para que no vayan debajo del logotipo.

<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav" role="navigation">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
</ul>
</div>

Answer 24

DEMO COMPLETA CON MUCHOS EJEMPLOS

ACTUALIZACIÓN IMPORTANTE: 21/12/15

Actualmente hay un error en Mozilla que descubrí que rompe la barra de navegación en ciertos anchos de 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. Cambiará de tamaño automáticamente y funciona en todos los navegadores.

Solo agréguelo a su css y use la marca navbar de la misma forma que lo haría con .img-responsive . Su 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 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 (para referencia solamente)

La gente parece olvidarse mucho del ajuste de objetos. Personalmente creo que es el más fácil de trabajar porque la imagen se ajusta automáticamente al tamaño del menú. Si solo utiliza el ajuste de objeto en la imagen, se ajustará 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 planeas usarlo para otra cosa. Parece que se está planificando el ajuste de objetos para una futura versión de IE, así que una vez que suceda esto 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 50px, pero el ancho no está establecido.

Si tomamos esa lógica y la revertimos para que sea sensible en función de la altura, podemos tener una imagen sensible que se amplíe a la altura de la marca .navbar y al agregar y establecer automáticamente el ancho, se ajustará a la proporción.

max-height: 100%;
width: auto;

Normalmente tendríamos que añadir display:block; al escenario, pero ya que navbar-brand ya tiene float: left; Aplicado a él, actúa automáticamente como un elemento de bloque.

Puede encontrarse con la rara situación en la que su logotipo es demasiado pequeño. El enfoque img-responsive no tiene esto en cuenta, pero lo haremos. Al agregar también el atributo "altura" a la .navbar-brand > img , puede estar seguro de que aumentará o disminuirá.

max-height: 100%;
height: 100%;
width: auto;

Así que para completar esto, los puse los dos 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>

DEMO http://codepen.io/bootstrapped/pen/KwYGwq

Answer 25

Solución rápida : cree una clase para su logo y establezca la height en 28px . Esto funciona bien con la barra de navegación en todos los dispositivos. Note que dije que funciona "BIEN".

.logo {
display:block;
height:28px;
}

Answer 26

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right"></ul>

// No se olvidó de agregar bootstrap en el encabezado de su código.

Answer 27

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-ex1-collapse">
<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" rel="home" href="#" title="Buy Sell Rent Everyting">
<img style="max-width:100px; margin-top: -7px;"
src="/img/transparent-white-logo.png">
</a>
</div>

Answer 28

<header class="navbar navbar-inverse header-outer" role="banner">
<div class="container form-inline">
<img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />
<div class="pull-right padding-top">
<form class="hidden-xs" role="form">
<div class="form-group" style="padding-left:10px">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
</div>
<div class="form-group">
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="form-group navbar-remember">
<label class="white-font">
<input type="checkbox" class="white-font"> Remember me
</label>
</div>
<button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
</form>
</div>
</div>
</header>

Por favor, comprenda el código por su cuenta: D Este es mi código de borrador y ya está funcionando :) Aquí está la captura de pantalla.