I am trying to make my image responsive on mobile view. I have used tailwindcss classes to set the Image className, and it works fine when I only use reactjs or a regular img tag. I am attempting to make this image responsive. I have tried setting the layout attribute of Image to "responsive" but the image disappears. I also tried setting it to "fill" but it ends up being too big and flat, it actually "fills" 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 solution! In NextJS v13.0.0, the image should be wrapped in your responsive code. You should not place your responsive className directly on the Nextjs Image component.
This 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>