Почему Safari не изменяет картинку по всем плоскостям (высота и ширина), а только по чётко указанным?

Question

[Ingernirated]

Всем привет!
Есть такой блок

<div class="box-logo">
	<img class="logo" src="logo.png">
</div>

Это код логотипа

.logo {
	position:relative;
	top:15%;
	height:70%;
	transition:100ms ease;
	-webkit-transition:100ms ease;
}

При уменьшении высоты блока box-logo в js, картинка логотипа уменьшается только в высоту, хотя ширина по умолчаниюauto и вроде сама должна подгоняться, а ширина остается, как была и раньше, когда он был выше по размеру, как это исправить в Safari? В остальных браузерах всё нормально работает.

Answer 1

[Антон Усачев]

Можно попробовать добавить max-height и max-width.
Но, ИМХО, лучше такая структура:

<div class="box-logo">
    <div class="logo"><img src="" alt=""></div>
</div>

А уже для img задать:

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; // опционально
}