使用Tailwind CSS时Flex导致图片缩小的问题及解决诉求

问题根源在于flex容器的默认行为：flex子元素会自动收缩以适应容器宽度，你之前把shrink-0加在了flex容器上，这完全没用——这个类是用来控制子元素是否允许收缩的。

正确的处理方式是给每张图片添加shrink-0，同时确保图片宽度匹配父容器的max-width：

• shrink-0：强制图片不收缩，固定自身宽度
• min-w-full：让图片宽度至少等于父容器（即max-w-[1200px]的容器）的100%，确保图片铺满容器宽度

修改后的代码如下：

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

如果你的图片原始尺寸大于1200px，还可以额外添加object-cover或object-contain类，控制图片的显示比例，避免拉伸变形。

内容的提问来源于stack exchange，提问作者Juan Yeremia