How can i prevent the image from zooming in when i resize the browser?

Question

newbie here. Does anyone know how to prevent the image from zooming in when i resize the browser ? I'm trying to create a carousel using tailwind and flowbite. Here's my CSS code :

<main>
      <section
        id="hero-section"
        class="bg-blue-300"
        style="height: calc(100vh - 65px)"
      >
        <div
          id="default-carousel"
          class="relative h-full w-full"
          data-carousel="slide"
        >
          <!-- Carousel wrapper -->
          <div class="relative h-full overflow-hidden md:h-96">
            <!-- Item 1 -->
            <div class="hidden duration-1000 ease-in-out" data-carousel-item>
              <img
                src="sample-image2-mobile.jpg"
                class="absolute block object-cover h-full w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
                alt="..."
              />
            </div>
            <!-- Item 2 -->
            <div class="hidden duration-1000 ease-in-out" data-carousel-item>
              <img
                src="sample-image2-mobile.jpg"
                class="absolute block object-cover h-full w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
                alt="..."
              />
            </div>
          </div>
          <!-- Slider indicators -->
          <div
            class="absolute z-30 -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse"
          >
            <button
              type="button"
              class="w-3 h-3 rounded-full"
              aria-current="true"
              aria-label="Slide 1"
              data-carousel-slide-to="0"
            ></button>
            <button
              type="button"
              class="w-3 h-3 rounded-full"
              aria-current="false"
              aria-label="Slide 2"
              data-carousel-slide-to="1"
            ></button>
            <button
              type="button"
              class="w-3 h-3 rounded-full"
              aria-current="false"
              aria-label="Slide 3"
              data-carousel-slide-to="2"
            ></button>
          </div>
        </div>
      </section>
</main>

I've tried things like setting-up high, object-cover, and so on but still didn't work.