我使用img-responsive类，然后在a元素上设置max-width。是这样的:

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

和CSS:

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

我也有同样的问题。我是这样解决的:

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

没有navbar-brand类。结果看起来像徽标图片，适合导航栏和工作就像一个链接。此外，我建议使用导航栏右侧类的菜单项，这样他们就不会到下面的标志。

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

这段代码工作完美，如果你需要看到品牌居中和自动宽度工具栏。 它包含从正确路径获取图像文件的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">

为什么每个人都想用艰难的方式来做?当然，其中一些方法是有效的，但它们比必要的要复杂得多。

好的，首先，你需要一个图像，将适合你的导航栏。你可以通过css的height属性来调整你的图像(允许宽度缩放)，或者你可以只使用一个适当大小的图像。无论你决定做什么，这看起来将取决于你的图像大小。

出于某种原因，每个人都想用navbar-brand将图像粘在锚中，这是不必要的。navbar-brand应用的文本样式，不是必要的图像，以及navbar-left类(就像拉左，但用于导航栏)。所有你真正需要的是添加导航栏左。

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

你甚至可以用一个导航栏品牌项目，它将出现在图像的右侧。

将以下内容添加到.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
}

我还通过css后台属性实现它。它在任何宽度值下都能正常工作。

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