我的工作代码- bootstrap 3.0.3。 当导航条切换，隐藏的x原始标志图像。

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

您可以尝试使用如下所示的@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

演示如何创建一个引导导航栏，其中logo的高度大于默认高度(50px):

示例:100px x 100px的标志，标准CSS:

Compute the height and (padding top + padding bottom) of the logo. Here 120px (100px height + padding top (10px) + padding bottom (10px)) Goto bootstrap / customize. Set instead of navbar height 50px > 120px (50 + 70) and navbar-collapse-max-height from 340px to 410px (340 + 70). Download css. In this example I use this navbar. In navbar-brand: <div class="navbar-header"> ... </button> <a class="navbar-brand myLogo" href="#"> <img src="yourLogo.jpg" /> </a> </div>... add a class, for example myLogo, and an img (your logo) <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>. Add CSS .myLogo { padding: 10px; } Adequate to other sizes.

例子

如果使用LESS，这是有效的:

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

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

我的工作代码- bootstrap 3.0.3。 当导航条切换，隐藏的x原始标志图像。

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