Why does Safari not change the image on all planes (height and width), but only on clearly defined ones?

Question

css

Hello!
There is a block

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

This is the logo code

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

When the block height is reduced box-logoin js, the logo image is reduced only in height, although the default width autoshould fit itself, but the width remains the same as before, when it was higher in size, how to fix this in Safari? In other browsers everything works fine.

Answer 1

You can try adding max-heightand max-width.
But, IMHO, this structure is better:

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

And already for img set:

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