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 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>