如何实现图片自动缩放以适配固定高度的Flexbox容器？

问题核心在于justify-between属性会破坏flex子元素的空间收缩逻辑，同时图片容器和图片的尺寸约束设置不当。以下是修复后的代码：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  
    <div class="container">
      <div class="flex flex-nowrap flex-col bg-red-500 h-[300px] overflow-hidden">

        <div class="border">lorem ipsum dolor</div>
        <div class="border">lorem ipsum dolor</div>
        <div class="border">lorem ipsum dolor</div>
        <div class="border">lorem ipsum dolor</div>
        <div class="border flex-1 shrink"><img class="w-full h-full object-contain" src="https://picsum.photos/id/237/200/300" /></div>
        <div class="border">lorem ipsum dolor</div>
      </div>
    </div>
</body>
</html>

关键修改说明 #

• 移除justify-between：该属性会强制子元素在垂直轴上分散排列，当内容总高度超过容器时直接溢出，无法触发flex的收缩机制。
• 图片容器添加flex-1：让图片容器占据容器内剩余空间，同时默认的shrink属性允许它在空间不足时自动收缩。
• 图片设置w-full h-full object-contain：确保图片填充容器的同时保持原始比例，避免拉伸变形。
• 用Tailwind的h-[300px]替代内联style，保持风格统一；添加overflow-hidden防止极端情况下内容溢出容器。

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