MISE À JOUR IMPORTANTE: 21/12/15
Il y a actuellement un bug dans Mozilla que j'ai découvert qui casse la barre de navigation sur certaines largeurs de navigateur avec BEAUCOUP DE DÉMOS SUR CETTE PAGE . Fondamentalement, le bug mozilla inclut le rembourrage gauche et droit sur le lien de la marque navbar dans le cadre de la largeur de l'image. Cependant, cela peut être résolu facilement et j'ai testé cela et je suis presque sûr que c'est l'exemple de travail le plus stable sur cette page. Il se redimensionne automatiquement et fonctionne sur tous les navigateurs.
Ajoutez simplement ceci à votre css et utilisez la marque navbar de la même manière que vous le feriez .img-responsive. Votre logo s'adaptera automatiquement
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
Une autre option consiste à utiliser une image d'arrière-plan. Utilisez une image de n'importe quelle taille, puis définissez simplement la largeur souhaitée:
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
RÉPONSE ORIGINALE CI-DESSOUS (pour référence seulement)
Les gens semblent beaucoup oublier l'ajustement d'objet. Personnellement, je pense que c'est la plus simple à utiliser car l'image s'adapte automatiquement à la taille du menu. Si vous utilisez simplement l'ajustement d'objet sur l'image, il sera automatiquement redimensionné à la hauteur des menus.
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
Il a été souligné que cela ne fonctionne pas "encore" dans IE. Il existe un polyfill , mais cela peut être excessif si vous ne prévoyez pas de l'utiliser pour autre chose. Il semble que l'ajustement d'objet soit prévu pour une future version d'IE, donc une fois que cela se produira, cela fonctionnera dans tous les navigateurs.
Cependant, si vous remarquez la classe .img-responsive dans le bootstrap, la largeur maximale suppose que vous placez ces images dans des colonnes ou quelque chose qui a un explicite avec set. Cela signifierait que 100% signifie spécifiquement 100% de largeur de l'élément parent.
.img-responsive
max-width: 100%;
height: auto;
}
La raison pour laquelle nous ne pouvons pas utiliser cela avec la barre de navigation est que le parent (marque .navbar) a une hauteur fixe de 50 pixels, mais la largeur n'est pas définie.
Si nous prenons cette logique et inversons à être réactif en fonction de la hauteur , nous pouvons avoir une image sensible que les échelles à la hauteur .navbar-marque et en ajoutant et réglage automatique largeur il ajustera à proportion.
max-height: 100%;
width: auto;
Habituellement, nous devrions ajouter display:block;au scénario, mais puisque la marque navbar a déjà flotté: gauche; appliqué, il agit automatiquement comme un élément de bloc.
Vous pouvez rencontrer la situation rare où votre logo est trop petit. L'approche img-responsive ne tient pas compte de cela, mais nous le ferons. En ajoutant également l'attribut "height" au, .navbar-brand > imgvous pouvez être assuré qu'il augmentera aussi bien que bas.
max-height: 100%;
height: 100%;
width: auto;
Donc, pour terminer, je les ai mis ensemble et cela semble fonctionner parfaitement dans tous les navigateurs.
<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" />: ajuster