@nazar_404

Как адаптировать картинку на сайте для любых устройств?

На сайте есть логотип в виде картинки. В браузере он нормально отображается и при ресайзе, и при тестировании на различных устройствах. Когда захожу на сайт со своего телефона (iphone se) выглядит все тоже корректно. Но на телефоне заказчика логотип растягивается на всю ширину экрана.
Есть
<meta name="viewport" content="width=device-width, initial-scale=1.0">

html:
<a href="">
<div class="logo">
<img class="logo__img" src="img/logo.png" alt="">
</div>
</a>

css:
.logo {
	max-width: 250px;
}

.logo__img {
	width: 100%;
}

Так же, написаны медиазапросы:
@media screen and (max-width: 991px) {

	.logo {
		max-width: 200px;
	}
}

@media screen and (max-width: 767px) {
	.logo {
		max-width: 150px;
	}
}
<code>
  • Вопрос задан
  • 121 просмотр
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы