为什么Flex会导致多个图像缩小？

Question

我想使用 Tailwind CSS 创建大小相同的图像轮播。我想要 5 个彼此相邻的图像，以便观看者能够左右滚动以查看图像。当图像在没有 Flex 的情况下导入时，它们符合我事先设置的最大宽度。然而，在实现 Flex 后，图像确实变得并排，但宽度缩小了。

在我的试用中，我只使用同一张图像 5 次。我已将容器的最大宽度设置为 1200px。导入图像时，我将图像设置为

w-full

，每个图像都成功满足了1200px的要求。但是，当我放置

Flex

时，图像会彼此相邻放置，但尺寸会减小。

正如您在第一张图片中看到的，**在**

Flex

之前，图片的右侧位于“我们的程序”中O的正下方。 弯曲前

但是

Flex

之后，第一张图片的宽度只达到“关于我们”中的A。 弯曲后

如何阻止这种情况发生？我不想让图像缩小。我也写过

shrink-0

这就是我编写程序的方式：

 <div id="scroll header" className="slider-container">
          <div className="relative my-0 mx-auto max-w-[1200px]"> {/* Class: Slider-wrapper */}
            <div className="flex shrink-0 overflow-x-auto h-auto mx-auto"> {/* Class: Slider */}
              <img src="/assets/banner2.jpg" className="w-full"/>
              <img src="/assets/banner2.jpg" className="w-full"/>
              <img src="/assets/banner2.jpg" className="w-full"/>
              <img src="/assets/banner2.jpg" className="w-full"/>
              <img src="/assets/banner2.jpg" className="w-full"/>
            </div>

Answer 1

flex-shrink

的默认值为

1

。因此，当主 Flex 轴上的 Flex 子元素的长度总和大于该轴上的可用空间时，元素将在该维度上收缩，直到它们全部适合或直到它们在该方向上满足其

min-content

尺寸。

在您的情况下，它们会缩小到其宽度，因为这是图像文件的自然宽度，即计算出的

min-content

宽度。

因此，为了阻止图像缩小（从而保持

width: 100%

中的

w-full

），您可以考虑通过 flex-shrink: 0 Tailwind 类名

:

应用 shrink-0

<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div class="relative my-0 mx-auto max-w-[1200px]">
  <div class="flex shrink-0 overflow-x-auto h-auto mx-auto">
    <img src="https://picsum.photos/1000/300" class="w-full shrink-0"/>
    <img src="https://picsum.photos/1000/300?" class="w-full shrink-0"/>
    <img src="https://picsum.photos/1000/300?0" class="w-full shrink-0"/>
    <img src="https://picsum.photos/1000/300?1" class="w-full shrink-0"/>
    <img src="https://picsum.photos/1000/300?2" class="w-full shrink-0"/>
  </div>
</div>