Responsive Room-Homepage using [NextJS, Image Slider]

Community feedback

• 

  Raymond•370

  @IheziePosted about 1 year ago

  Hey! Great solution👍. I also tried using <img srcset="" sizes=""> in my solution to this challenge; however, that didn't work out for me. So I used this instead:

  <picture >
                  <source
                    media="(max-width: 450px)"
                    srcset={item.images.mobile}
                  />
                  <img
                    src={item.images.desktop}
                    alt="hero"
                  />
   </picture>
  

  This method allowed me to use different hero images for varying screen sizes. Hope this helped.😊

  1

  ---

  

  Kenny Ng•400

  @kennylun123Posted about 1 year ago

  @Ihezie Hi, thanks for your reply! I agree to use <picture> element instead of <img srcset="" sizes=""> since its complexity.

  <img
    key={index}
    className={styles.slides}
    src={slide.img.src}
    srcSet={`${slide.img.src}, ${slide.imgMobile.src} 375w`}
    alt={`slide image ${index}`}
  />
  

  *Explanation: The image with 375w descriptor will only be used when the viewport width is lower than 375 pixels. And the image url in the srcset will not narrow down once the larger image is selected.

  More details in below.

  https://stackoverflow.com/questions/24132972/picture-source-element-vs-img-srcset-attribute

  0