I am trying to use the Next.js Image component in my React project with Tailwind CSS, but I am encountering issues with applying relative positioning styles and other specific styles like objectFit
. The problem seems to stem from the container div
that Next.js automatically creates around the img
tag. Here is my current code:
<section style={{ position: 'relative', width: '100vw', height: '56.25vw', maxHeight: '500px' }}>
<Image
src={carouselItem.image}
alt={`Slide ${carouselItem.text}`}
layout="fill"
objectFit="cover"
className="object-cover object-center aspect-video"
/>
</section>