重要更新：2015 年 12 月 21 日
目前有一个bug in Mozilla，我发现它打破了某些浏览器宽度上的导航栏，此页面上有许多演示。基本上，mozilla 错误包括导航栏品牌链接上的左右填充作为图像宽度的一部分。但是，这可以很容易地修复，并且我已经对此进行了测试，并且我相当确定它是此页面上最稳定的工作示例。它将自动调整大小并适用于所有浏览器。
只需将其添加到您的 css 中并像使用 .img-responsive 一样使用 navbar-brand。您的徽标将自动适应
.navbar-brand {
padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
height: 100%;
padding: 15px; /* firefox bug fix */
width: auto;
}
另一种选择是使用背景图片。使用任意大小的图片，然后设置所需的宽度：
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
width: 200px;
}
以下原始答案（仅供参考）
人们似乎经常忘记对象匹配。我个人认为这是最容易使用的，因为图像会自动调整到菜单大小。如果您只是在图像上使用对象适合，它将自动调整到菜单高度。
.navbar-brand > img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
有人指出，这在 IE 中“还”不起作用。有一个polyfill，但如果你不打算将它用于其他任何事情，那可能就太过分了。对于 IE 的未来版本，看起来 object-fit 是 being planned，所以一旦发生这种情况，这将适用于所有浏览器。
但是，如果您注意到引导程序中的 .img-responsive 类，则最大宽度假设您将这些图像放在列中或具有显式设置的东西中。这意味着 100% 特别表示父元素的 100% 宽度。
.img-responsive
max-width: 100%;
height: auto;
}
我们不能将它与导航栏一起使用的原因是因为父级 (.navbar-brand) 具有 50px 的固定高度，但未设置宽度。
如果我们采用该逻辑并反转它根据高度进行响应，我们可以拥有一个缩放到 .navbar-brand 高度的响应图像，并通过添加和自动设置宽度来调整它成比例。
max-height: 100%;
width: auto;
通常我们必须在场景中添加display:block;，但由于 navbar-brand 已经有 float:left;应用于它，它会自动充当块元素。
您可能会遇到徽标太小的罕见情况。 img-responsive 方法没有考虑到这一点，但我们会考虑的。通过将“height”属性添加到.navbar-brand > img，您可以放心，它会按比例放大和缩小。
max-height: 100%;
height: 100%;
width: auto;
所以为了完成这个，我将它们放在一起，它似乎在所有浏览器中都能完美运行。
<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>