У меня очень странная проблема с изображением (lo go), которое вставлено в заголовок моего HTML. В десктопе работает нормально, как и на некоторых мобильных устройствах. Дело в том, что в моем мобильном он по какой-то причине не подходит, я не могу понять, изображение потеряло свою пропорцию.
У меня iPhone, но это происходит и в Android. Это странно, потому что локально он работает нормально, но как только я помещаю его на сервер, он меняет свою пропорцию, но только на некоторых устройствах, а не на всех.
.img {
max-width: 600px
}
@media screen and (max-width: 575px) {
.img {
max-width: 230px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<header class="d-flex justify-content-center mt-5 mb-25">
<img src="https://via.placeholder.com/600" alt="logo" class="img img-fluid">
</header>