Изображение профиля Bootstrap 3 в navbar

Как мне получить изображение профиля (см. рисунок), чтобы сказать 25/30 пикселей без искажения навигационной панели?

Это то, что у меня есть сейчас:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    <img src="http://placehold.it/18x18" class="profile-image img-circle"> Username <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="#"><i class="fa fa-cog"></i> Account</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li>
    </ul>
</li>

это результат:

Но если я изменил размер изображения на 30x30, это то, что происходит, как я могу предотвратить искажение навигатора:

Я попытался очистить маржу и прокладки на изображении, но это не повлияло.

Обновление: Вот JSFiddle текущего кода.

Ответ 1

Вы получили это в основном правильно, следуя тому, что сказал Kooki3, в таблице стилей Bootstrap просто больше, поэтому просто измените .profile-image на .navbar-nav>li>a.profile-image

Редактирование вашей скрипки, как это, nav выглядит идеально для меня:

.navbar-nav>li>a.profile-image {
    padding-top: 10px;
    padding-bottom: 10px;
}

Ответ 2

после просмотра JSFiddle, я выяснил, что проблема вызвана высотой используемого вами изображения вместо заполнения.

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

<li class="dropdown">
    <a href="#" class="dropdown-toggle profile-image" data-toggle="dropdown">
        <img src="http://placehold.it/30x30" class="img-circle special-img"> Test <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#"><i class="fa fa-cog"></i> Account</a></li>
                    <li class="divider"></li>
                    <li><a href="#"><i class="fa fa-sign-out"></i> Sign-out</a></li>
                </ul>
</li>

.special-img 
{
    position: relative;
    top: -5px;
    float: left;
    left: -5px;
}

My Fiddle здесь

Ответ 3

//write you  script
$(document).ready(function(){
    $(".dropdown").mouseover(function(){
        $(".dropdown-menu").show();
    })
    $(".dropdown").mouseout(function(){
        $(".dropdown-menu").hide();
    });
});