CODEWITHSUNDEEP
javascriptnext.jstailwind-css
Deri Kurniawan
Deri Kurniawan

Reputation: 496

Unresponsive image on Next [email protected] when using Image from next/image with tailwindcss class

I want to make my image responsive on mobile view. I've been to set Image className with tailwindcss classes, and its work when I only use reactjs or regular img tag. I want to make this image responsive. I've been try to set layout attribute of Image with "responsive" but the image disapear. I've been try to set with "fill" but it's too big and flat, actually it really "fill" my entire screen 😂

This is my code

<div className="flex justify-center lg:items-end lg:justify-end">
    <Image
      className="pt-[45px] lg:pt-0 w-[219px] h-[222px] ss:w-[271px] ss:h-[276px] sm:w-[379px] sm:h-[382px] lg:w-[421px] lg:h-[426px] z-[1]"
      src={data?.image}
      alt="person_hero"
      width="421"
      height="426"
    />
</div>

I have found the way In NextJS v13.0.0, the image should be wrapped in your responsive code. don't place your responsive className on Nextjs Image component directly.

this is code solved my problem.

    <div className="pt-[45px] lg:pt-0 w-[219px] h-[222px] ss:w-[271px] ss:h-[276px] sm:w-[379px] sm:h-[382px] lg:w-[421px] lg:h-[426px] z-[1]">
      <Image src={data?.image} alt="person_hero" width="421" height="426" />
    </div>

Upvotes: 2

Views: 711

Answers (1)

Deri Kurniawan
Deri Kurniawan

Reputation: 496

I have found the way The image should be wrapped in your responsive code. don't place your responsive className on Nextjs Image component directly.

this is code solved the problem.

    <div className="pt-[45px] lg:pt-0 w-[219px] h-[222px] ss:w-[271px] ss:h-[276px] sm:w-[379px] sm:h-[382px] lg:w-[421px] lg:h-[426px] z-[1]">
      <Image src={data?.image} alt="person_hero" width="421" height="426" />
    </div>

Upvotes: 1

Related Questions