При уменьшении размера экрана, уменьшаеться картинка. min-width i min-height не помогают

когда размеры экрана доходят до 70, картинка (она находиться в хедере) начинает сильно уменьшаться. При этом, все остальное, а это кнопка логина и сама навигация остаються на месте.

вот размеры 970: введите сюда описание изображения

а вот 950: введите сюда описание изображения

вот HTML код:

<div class="header-logo"><img src="img/logo-4.jpg" alt="Logo" class="logo"></div>

а вот css код:

@media (max-width: 960) {
.logo {
    min-height: 37px;
    min-width: 60px;
}

.header-logo {
    min-height: 37px;
    min-width: 60px;
}

.header-login {
    height: 10px;
}

}


Ответы (1 шт):

Автор решения: BlackStar1991

Поскольку автор поленился привести код отображенных картинок, то предположу что элементы меню выстраиваються через flex-box Для того, что бы были минимальные значения картинок лучше не указывать min-width а зафиксировать размены картинки через width:60px; display:inline-block; или же width:100%; max-width:60px а єлементу навигации задать width:100%;

→ Ссылка