Почему изображение не сжимается в зависимости от ширины и высоты родительского элемента ⇐ CSS

[Anonymous]

Я обернул тег img тегом div.

Код: Выделить всё

И я задал свойства ширины и высоты для продукта-img-wrapper. Но размер изображения не подстраивается под размер экрана.
css

Код: Выделить всё

.product-details-container {
box-sizing: border-box;
}

.product-img-wrapper {
max-width: 60vw;
max-height: 50vh;
}

.product-img-wrapper img{
max-width: 90%;
max-height: 70%;
object-fit: contain;
}

Размер отображаемого изображения — 555 x 617 пикселей, а размер div.product-img-wrapper – 616,8 x 364,8. Я хочу понять, почему img не сжимается и правильно ли писать обертку img?

Код: Выделить всё

ListingCardImage

код

Код: Выделить всё

return 
[img]https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/785 ... and-height