Why Safari does not change the picture for all planes (height and width), but only in clearly specified?

Hello!
There is a block
<div class="box-logo">
 <img class="logo" src="logo.png">
</div>


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


When reducing the height of a block box logo to js, the logo is reduced only in height, although the width of the defaultauto and the like itself should fit, but width remains as it was before when it was higher in size, how to fix it in Safari? In other browsers everything works fine.
March 23rd 20 at 18:59
1 answer
March 23rd 20 at 19:01
You can try to add max-height and max-width.
But, IMHO, the best such structure:
<div class="box-logo">
 <div class="logo"><img src="" alt=""></div>
</div>


And already to img ask:

img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain; // optional
}

Find more questions by tags SafariCSS