Держите логотип в центре и поддерживайте коэффициент

Question

После одного часа попытки понять это с помощью нескольких версий jquery я сдаюсь. У меня есть меню навигации, в котором есть логотип в центре. Мне нужен логотип, чтобы всегда быть кругом. Поскольку макет реагирует, я устанавливаю высоту логотипа на основе ширины, созданной для него. Проблема в том, что всякий раз, когда я меняю размер области просмотра, логотип перемещается на место по высоте, и я не знаю, как его поддерживать.

Вот JSFiddle

Fiddle result here

В настоящее время существует 5 кнопок в меню навигации, так что каждая кнопке 20% ширины. Тогда я установить высоту и офсет логотипа, как этот

function scaleLogo(){ 

    var ww = $(window).width(); 
    if (ww < 300) { 
     var cr = 0.05; 
    } 
    else { 
     var cr = 0.30; 
    } 

    var cw = $('#home_btn').width(); 
    $('#home_btn').css({ 
     'height': cw + 'px', 
     'top': '-' + cr * cw + 'px' 
    }); 
} 

Таким образом, 'height': cw + 'px' задает высоту по размеру ширины и 'top': '-' + cr * cw + 'px' устанавливает верхний атрибут минус CR (отношение окружности) раз CW (весовой круг) что приводит к его позиционированию либо -10% от ширины, когда ширина экрана составляет менее 400 пикселей или -30% от ширины, когда выше 400 пикселей.

Проблема заключается в том, что это единственный вид работы, когда я переключаюсь на свой телефон или полный рабочий стол hd и масштабируюся до небольшой ширины, окно просмотра становится очень тонким и высоким, что делает логотип не центрированным вообще.

Я был бы очень благодарен за любые советы и советы о том, как успешно центрировать логотип независимо от ширины или высоты окна просмотра.

Я пытался заставить минимальную ширину на корпусе, как body{min-width:600px}, и предположил, что когда я изменил ширину окна до менее 600 пикселей, это остановило бы масштабирование содержимого, но ничего не делало. Если бы кто-нибудь мог это объяснить, я был бы признателен за это.

Как всегда, с нетерпением жду ваших ответов. Спасибо.

Answer 1

Heres очень простое решение: вместо того, чтобы размещать свой логотип с использованием процентов сверху, установите его с фиксированным процентом и уменьшите на половину размера пикселя, который вы уже рассчитали. Это работало в вашей скрипке:

$('#home_btn').css({ 
    'height': cw + 'px', 
    // steadily position it in the middle 
    'top': '50%', 
    // then reduce its top margin with half its height 
    'margin-top' : -(cw/2) + 'px' 
}); 

Answer 2

Основная идея с позиционированием логотипа с помощью CSS и не заботясь о позиционировании изображения

$(window).on("resize", function() { 
 
    var winWidth = $(this).width(); 
 
    var logoSize = Math.ceil(winWidth/4); 
 
    $(".logo").width(logoSize).height(logoSize); 
 
});

.logo { 
 
    background-repeat: no-repeat; 
 
    background-image: url(http://s.cdpn.io/3/kiwi.svg); 
 
    background-position: 50% 50%; 
 
    background-size: 50%; 
 
    height: 200px; 
 
    width: 200px; 
 
    background-color: rgb(211,211,211); 
 
    border-radius:50%; 
 
    box-shadow: 0px 5px rgba(0,0,0,0.3); 
 
}

<div class="logo"></div>

же код на JSFiddle: http://jsfiddle.net/0rLwh4w3/ где вы можете на самом деле изменить размер браузера