I have enclosed an image tag within a div tag.
<div className="product-details-container">
<div className="product-img-wrapper">
<ListingCardImage imgAlt={product.title} imgSrc={product.image}/>
</div>
</div>
Despite setting width and height properties for product-img-wrapper, the image size does not adjust to fit the screen view.
Here is the 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 rendered image size is 555x617px, while the dimensions of div.product-img-wrapper are 616.8x364.8. I am interested in understanding why the image is not shrinking and if this is the correct way to wrap an image?
Code for ListingCardImage:
return <>
<img src="https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg" alt={imgAlt} />
</>