Skip to content
Submitted almost 2 years ago

Article preview component (HTML + CSS + Vanilla Javascript)

Kévin Burle•370
@kevinburle
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

Hello everyone,

I have some problems to display the image on a certain height while keeping the ratio. I can't set a fixed height because otherwise when I enlarge my viewport the image gets distorted. How do you fix this without using media queries? I only let the image take 100% of the height for the moment but it's not perfectly the requested design. I could eventually make the mobile design unresponsive to the desktop breakpoint but I don't think that's a good solution. Your help and suggestions are welcome!

thanks !

Community feedback

  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlinePosted almost 2 years ago

    Have you tried using max-width, max-height, or min-width, min-height, etc? It helps a lot sometimes.

    0
    Kévin Burle•370
    @kevinburlePosted almost 2 years ago

    @catherineisonline yes but I will take a look at the solutions of the community members thank you

    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