Skip to content
Submitted about 1 month ago

Article Preview

KapteynUniverse•1,540
@KapteynUniverse
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What specific areas of your project would you like help with?

I think i am having trouble with images all the time. Couldn't adjust text section height like %70 of the card because img height didn't reduce ( height = 100% wasn't there at start ) Tried flex .3, max-height etc. Also couldn't find how to crop img either. Maybe overflow = hidden would work normally but here i used flex.

Community feedback

  • Claudia•440
    @ClaudiaRamirezDPosted about 1 month ago

    Set the image container to have overflow: hidden, and the image should be styled with object-fit: cover to maintain the aspect ratio while filling the space: .article-preview__image { overflow: hidden; height: 200px; }

    .article-preview__image img { width: 100%; height: 100%; object-fit: cover; } In this project I used SO MUCH the dev tools, don't be afraid to make mistakes and keep improving!

    1
    KapteynUniverse•1,540
    @KapteynUniversePosted about 1 month ago

    @ClaudiaRamirezD Thanks for the feedback. Yea, i forgot to mention that. With that way whole article card height reduce (i think to balance the flex). This doesn't look bad tho, when i tried something like this, i didn't like the result. What was i tried to do just manipulate img while keeping the whole card.

    0

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