Tailwind CSS中Flex项目添加flex-shrink仍无法收缩问题

问题原因 #

给图片设置了固定的w-96和h-96，这会锁定图片的基础尺寸，即便添加flex-shrink也无法突破固定尺寸限制实现自适应收缩。另外，直接收缩未做比例处理的话，还会导致图片变形。

解决方案 #

修改图片的类名，移除固定宽高，改用以下配置让图片自适应容器空间且保持比例：

<div class="bg-black p-4">
  <div class="flex">
    <img class="flex-1 max-w-full object-cover h-auto" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
    <img class="flex-1 max-w-full object-cover h-auto" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
    <img class="flex-1 max-w-full object-cover h-auto" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt="" />
    <img class="flex-1 max-w-full object-cover h-auto" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
  </div>
</div>

关键属性说明 #

• flex-1：让每张图片平分flex容器内的可用空间，自动分配宽度
• max-w-full：限制图片最大宽度不超出容器范围，防止溢出
• object-cover：保持图片宽高比，通过裁剪多余部分填满容器，避免变形
• h-auto：根据图片宽度自动适配高度，维持比例

若需要固定图片高度（比如保留原h-96），可调整类名为：

<img class="flex-1 max-w-full object-cover h-96" src="..." alt="" />

这样图片会保持固定高度，宽度自适应收缩，同时保证比例不变。

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