Skip to content
Submitted over 2 years ago

Stats preview card component

Francesco•270
@FraCav99
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello world!

What I've found a little bit complicated was making image adapt to the container. Looking at some solution, I've adapted them to my case, thanks to the great community here on Frontend Mentor!

Any suggestion will be highly appreciated! Have a nice day! :D

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Francesco, congratulations for your new solution!

    Here's my tips to improve your component and image responsiveness:

    Add display: block and max-width: 100% to make the image responsive and object-fit: cover to have the effect cropping the image inside the container while the container resize:

    .img-container img {
display: block;
    max-width: 100%;
    object-fit: cover;
}

    👋 I hope this helps you and happy coding!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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