Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Desktop first using css and HTML

@mkulemeka

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How else can I make sure that my image fits the desired content box without setting height to 100%?

Community feedback

Akerele Tunde• 165

@trafiki

Posted

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 helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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