Art Gallery Website

Community feedback

• 

  P

  Ortaly•970

  @ortalyartsPosted 9 months ago

  Hello @yawsamcode!

  Nice job!

  I have some suggestions to improve the image appearance:

  1. To prevent an image appear unsharp - set the max-width for them. For example: the heigh picture with the bench in this design should be maximal 635x720 px (size taken from the Figma file).

  2. Alternatively, I usually set the max-width on the image's parent element and for the image itself I set: max-width: 100%; height: auto; this keeps the image's ratio the same for each size, not allowing it to squeeze.

  3. In this challenge we got for each image 2 it's variations: for normal screens (x1) and for retina (x2). On my screen I see the image x1 though it should be x2. This is another reason for unsharp appearance. To solve this you can use srcset attribute:

  <img srcset="
    examples/images/image-384.jpg 1x, 
    examples/images/image-768.jpg 2x
  " alt="…">
  

  Here is a great article to this topic

  I hope it you find it useful. Above all, your solution looks really nice! Cheers :)

  Marked as helpful

  0

  ---

  

  P

  Samuel O. Acheampong•230

  @yawsamcodePosted 9 months ago

  @ortalyarts Thank you so much for the feedback.

  0