I am currently troubleshooting an issue with the Tailwind CSS Carousel related to responsiveness.
While the Carousel displays correctly on most devices, I am facing a problem on mobile devices. When the screen size is reduced, instead of scaling down, the images in the carousel are being cropped:
<div className=" h-1/2 w-full relative group">
<div
style={{ backgroundImage: `url(${slides[currentIndex].url})` }}
className="h-5/6 bg-cover duration-500 overflow-hidden"
></div>
{/* Left Arrow */}
<div className="hidden group-hover:block absolute top-[50%] -translate-x-0 translate-y-[-50%] left-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer">
<BsChevronCompactLeft onClick={prevSlide} size={30} />
</div>
{/* Right Arrow */}
<div className="hidden group-hover:block absolute top-[50%] -translate-x-0 translate-y-[-50%] right-5 text-2xl rounded-full p-2 bg-black/20 text-white cursor-pointer">
<BsChevronCompactRight onClick={nextSlide} size={30} />
</div>
<div className="flex top-4 justify-center py-2">
{slides.map((slide, slideIndex) => (
<div
key={slideIndex}
onClick={() => goToSlide(slideIndex)}
className="text-2xl cursor-pointer"
>
<RxDotFilled />
</div>
))}
</div>
</div>