I’m building an image carousel on my website, and my images are all 1350 x 523
so i made my carousel 523 pixels in height to cover it’s full extent on height
but it’s width is responsive to the screen size, but when it is less than 1350, the image is not fully shown, it cuts it off, i wanted the image to resize according to the width of the carousel and be displayed in it’s full extent in both width and height.

here’s the example:
Image of the carousel

you can note the watermark is not being 100% shown because the image got cutted out.

heres the code:

const slides = [
  {
    url:'../src/assets/img/banner1.png'
  },
  {
    url:'../src/assets/img/banner2.png'
  },
  {
    url:'../src/assets/img/banner3.png'
  },
  {
    url:'../src/assets/img/banner4.png'
  },
  {
    url:'../src/assets/img/banner5.png'
  }
]
{/*Carousel Container*/}
<div className="max-w-[1400px] h-[523px] w-full m-auto py-8 px-4 relative">
{/*Image Div*/}
      <div style={{backgroundImage:`url(${slides[currentIndex].url})`}}
      className="w-full h-full rounded-2xl bg-center bg-cover duration-500 "></div>
</div>

i simplified the code to show just the useful parts

i have tried all the ways to resize the carousel container and setting the image’s width to 100% of the parent, but it doesn’t work