Как выровнять навигационную марку с остальными ссылками

Question

Если я использую изображение вдоль боковой ссылки, навигационная панель становится больше.

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

В результате http://jsfiddle.net/6xzwdwfr/18/embedded/result/. Но как мне сделать так, чтобы он выглядел как http://jsfiddle.net/6xzwdwfr/21/embedded/result/?

В принципе, я хочу убедиться, что добавление изображения не приводит к увеличению навигационной панели.

Я попытался уменьшить некоторые прокладки и поля в классах nav*, но это только усугубило ситуацию.

Как его настроить?

Answer 1

Удалить верхнюю и нижнюю из .navbar Прокладки-навигационного> LI> а

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

Answer 2

Если то, что вы хотите, чтобы поместить изображение в навигационной панели, так что подходят и сохранить отношения, вы можете взять смотреть на это ответил пост: How do I fit an image (img) inside a div and keep the aspect ratio?

Answer 3

Try изменение размера в <a>, который содержит изображение, добавив следующий код:

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

Таким образом, элемент <a> не имеет значения больше, чем к <img>, которое он содержит. Я попробовал это в вашей скрипке, и это сработало.