Искажение присутствует при переходе img с объектом CSS fit

Question

Я проверил его в Chrome и Firefox, а в обоих браузерах, когда я наводил курсор на изображение, переход, похоже, забыл, что применяется правило object-fit.

Это ошибка или что-то не так?

EDIT: Я нашел, что это выглядит хорошо, если я положил img внутри div и анимировал, что div. Но я бы не хотел изменять мои html по причинам CSS.

* { 
 
    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

Вы должны установить высоту как авто:

* { 
 
    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>