您可以尝试使用如下所示的@media查询。

首先添加一个logo类，然后使用@media指定每个设备大小的logo高度和宽度。在下面的例子中，我的目标设备的最大宽度为320px (iPhone)，你可以玩这个，直到你找到最合适的。简单的测试方法:使用带有inspect元素的chrome或Firefox。尽可能缩小你的浏览器。根据您指定的@media max width观察徽标大小的变化。在iPhone, android设备，iPad等上进行测试，以获得理想的结果。

.logo {
  height: 42px;
  width: 140px;
}

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

完整的演示与许多例子

重要更新:12/21/15

目前在Mozilla中，我发现了一个错误，在某些浏览器宽度上的导航栏与许多演示在此页。基本上，mozilla的错误是将导航栏品牌链接上的左右填充作为图像宽度的一部分。然而，这可以很容易地修复，我已经测试过了，我相当肯定这是本页上最稳定的工作示例。它会自动调整大小，适用于所有浏览器。

只需将此添加到您的css和使用navbar-brand相同的方式。img-responsive。你的标志将自动适合

.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中“还不能”工作。有一个填充，但这可能是多余的，如果你不打算用它做任何其他事情。它看起来像是为未来的IE版本计划的对象适配，一旦发生，它将在所有浏览器中工作。

然而，如果你注意到bootstrap中的.img-responsive类，max-width是假设你将这些图像放在列中或具有显式with set的东西中。这意味着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>

演示http://codepen.io/bootstrapped/pen/KwYGwq

这段代码工作完美，如果你需要看到品牌居中和自动宽度工具栏。 它包含从正确路径获取图像文件的Wordpress函数:

<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">

快速修复:为你的logo创建一个类，并设置高度为28px。这适用于所有设备上的导航栏。注意，我说的是“WELL”。

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

您可以尝试使用如下所示的@media查询。

首先添加一个logo类，然后使用@media指定每个设备大小的logo高度和宽度。在下面的例子中，我的目标设备的最大宽度为320px (iPhone)，你可以玩这个，直到你找到最合适的。简单的测试方法:使用带有inspect元素的chrome或Firefox。尽可能缩小你的浏览器。根据您指定的@media max width观察徽标大小的变化。在iPhone, android设备，iPad等上进行测试，以获得理想的结果。

.logo {
  height: 42px;
  width: 140px;
}

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

将以下内容添加到.navbar-brand类中

.navbar-brand
{
  padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}

.navbar-brand > img
{
   height: 100%; // set height to occupy full height space on the navbar-brand
   width: auto; // width should be auto to allow img to scale accordingly
   max-height: 100%; // optional
   margin: 0 auto; // optional
}