Design comparison
Solution retrospective
How else can I make sure that my image fits the desired content box without setting height to 100%?
Community feedback
- @trafikiPosted about 3 years ago
Hi @mkulemeka considering the approach you took, It is necessary that you set width and height of the image. The issue with setting the width and height here is that the image is forced to take the dimension of the container making the image distorted when the dimension of the parent div's container doesn't quite align with the image dimension. To fix this error, all you need to do is add "object-fit: cover;" to your ".main .img img" style rule.
You can read more about the object-fit css property at https://www.w3schools.com/css/css3_object-fit.asp
Let me know if that helps or if you have additional questions.
Cheers :)
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord