Search code examples
javascriptjavatypescriptnext.jstailwind-css

Next.js Slideshow Image Height Issue on Desktop & Mobile

I'm building a website using Next.js, Tailwind CSS, and the Next.js Image component, but I'm facing an issue with my image slideshow. On desktop, the height of the images is too large, and I have to scroll down to see the full image. On mobile, the images in the slideshow aren't displayed correctly. I’d really appreciate any suggestions on how to make the images fit properly on all screen sizes. Project Links: 📌 GitHub Repository: https://github.com/crysomemore123/chitilebiNEW 🌍 Live Website: https://www.chitilebi.ge/ Thanks in advance for any advice / help!

What I’ve Tried: I set the container height to h-screen, but the images still don’t fit properly. I tried using object-cover, but the issue persists. I changed the layout property of the <Image /> component to responsive, but no luck.

Solution

  • you can use this height and width property of Image tag

    <Image
      src="/profile.png"
      width={500}
      height={500}
      alt="Picture of the author"
    />

    Also, Another way you can do this is by using CSS to set height and width .