Distortion is present when transitioning img with CSS object fit - css

Question

I checked it in Chrome and Firefox and in both browsers when I hover over the image, the transition seems to forget that the object-fit rule is applied.
Is this a bug or is there something wrong?
EDIT: I found it looks good if I put the img inside a div and animate that div. But I wouldn't like to modify my html for css reasons.
* {
padding: 0;
margin: 0;
}
figure {
width: 400px;
height: 150px;
overflow: hidden;
}
figcaption {
position: absolute;
z-index: 1;
color: white;
font-family: Arial;
top: 10px;
left: 10px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
transition: transform 0.5s ease;
}
img:hover {
transform: scale(1.2);
}
<figure>
<figcaption>Title</figcaption>
<img src="http://www.fondox.net/wallpapers/un-gato-bebe-433.jpg" alt="" />
</figure>

Answer 1

You have to set height as auto:
* {
padding: 0;
margin: 0;
}
figure {
width: 400px;
height: 150px;
overflow: hidden;
}
figcaption {
position: absolute;
z-index: 1;
color: white;
font-family: Arial;
top: 10px;
left: 10px;
}
img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center center;
transition: transform 0.5s ease;
}
img:hover {
transform: scale(1.2);
}
<figure>
<figcaption>Title</figcaption>
<img src="http://www.fondox.net/wallpapers/un-gato-bebe-433.jpg" alt="" />
</figure>