Как изменить размер логотипа при просмотре на мобильном телефоне

Question

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

@media (max-width: 360px) { 
    .header-logo img { 
     max-width: 50%; 
     max-height: 50%; 
    } 
} 

Я не уверен, что нужно подстраивать дальше, так как Firebug, кажется, отображение кода для настольной версии. И я не хочу ничего менять на рабочем столе. Просто мобильный.

Получу любую обратную связь.

Answer 1

Попробовать это

.header-logo img { 
    width: 100%; 
    height: 400px; 
    background-image: url('img_flowers.jpg'); 
    background-repeat: no-repeat; 
    background-size: contain; 
    border: 1px solid red; 
} 

Answer 2

Вы можете сделать следующие изменения в CSS.

.header-logo img { 
     max-width: 100%; 
     max-height: auto; 
    } 

Answer 3

В max-width из 360px изменения свойства стиля для класса .custom-logo-link, как показано ниже,

@media screen and (max-width : 360px){ 
.custom-logo-link { 
    width: 50%; 
} 
} 

Answer 4

Вы должны указать только ширину, он будет автоматически регулировать высоту.

.header-logo img { 
    width: 100%; 
} 

Answer 5

Это может быть глупый вопрос, но уверены ли вы, что максимальная ширина и максимальная высота - это то, что вы хотите изменить здесь? Эти параметры просто устанавливают верхний предел того, насколько высок и широк элемент.

https://www.w3schools.com/CSSref/pr_dim_max-width.asp

Возможно попробовать один из них?

@media (max-width: 360px) { 
    .header-logo img { 
    width: 50%; 
    height: 50%; 
    } 
} 

или:

@media (max-width: 360px) { 
    .header-logo img { 
    transform: scale(0.5); 
    } 
}