如何防止调整浏览器大小时图像放大？

Question

这里是新手。有谁知道当我调整浏览器大小时如何防止图像放大？ 我正在尝试使用顺风和流咬合创建一个旋转木马。这是我的 CSS 代码：

<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>

我尝试过诸如设置高、对象覆盖等，但仍然不起作用。

Answer 1

提示： 使用 object-fit: contains 而不是 object-cover

<img
  src="sample-image2-mobile.jpg"
  class="absolute block object-contain h-full w-full -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
  alt="..."
/>

Tailwind CSS 提供宽高比实用程序（例如，aspect-w-16 aspect-h-9 表示 16:9 的比例），但这种方法取决于您的设计要求。

Tailwind CSS 允许使用断点进行响应式设计。您可以考虑根据视口大小调整图像的大小甚至来源。