I have wrapped a img tag with a div tag.

<div className="product-details-container">
        <div className="product-img-wrapper">
            <ListingCardImage imgAlt={product.title} imgSrc={product.image}/>
        </div>
</div>

And I’ve given width and height properties to product-img-wrapper. But the image size isn’t adjusted to screen view.

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;
}

The image rendered size is 555x617px and the div.product-img-wrapper is 616.8x364.8. I want understand why the img is not shrinked and whether it’s the right way to write a img wrapper?

ListingCardImage code

return <>
        <img src={imgSrc} alt={imgAlt} />
    </>