Skip to content
Submitted over 4 years ago

ReactJS site using Flex, Grid, and SCSS.

Christopher Till•1,070
@chri55
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Minimalist portfolio website
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Images are so hard to scale properly, does anyone have any tips on how i could have improved the scaling across device sizes, of the images in ImageFeatureRow?

Keep in mind, if you're testing this site, that you have to reload the page to get the correct images when changing breakpoints (i.e, mobile, tablet, desktop). I don't know if there's a way to update an image source automatically on screen resize in ReactJS.

Community feedback

  • Francis Luigie Quenano•330
    @flquenanoPosted over 4 years ago

    for scaling images, I use html img srcSet. Depending on the media specified, it will only load that image saving bandwidth.

    1
  • Roman Filenko•3,335
    @rfilenkoPosted over 4 years ago

    Hey, would suggest you to just use regular img tag and just style it to make responsive(max-width: 100%, object-fit). This way it will be way more easier😉

    Cheers, Roman

    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