Html 如何使导航栏品牌与其他链接保持一致

如果我使用链接旁边的图像，导航栏会越来越大

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                <img src="..." /> // this is causing the problem 
             Me<span class="caret"></span>
                  </a>
        <ul class="dropdown-menu" role="menu">
            <li><a>Sample 1</a>
            </li>
            <li class="divider"></li>
            <li><a>Sample 1</a>
            </li>
        </ul>
    </li>
</ul>

。但我该怎么做才能让它看起来像

基本上，我想确保添加图像不会导致导航栏放大

我试图减少
nav*
类中的一些填充和边距，但这只会让事情变得更糟

如何调整？
从.navbar nav>li>a中移除顶部和底部衬垫

.navbar-nav > li > a {
  padding: 0px 12px;
  margin: 12.5px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
}

如果你想把你的图像放在导航栏中，这样它就可以适应并保持比例，你可以看看下面这篇回复文章：
通过添加以下代码，尝试重新调整包含图像的
：

li.dropdown > a {
    height: 34px;
}

这样，
元素就不会比它包含的
占用更多的空间。我在你的小提琴上试过了，它成功了。
不，不成功。你可以编辑我的小提琴，自己看看