Tailwind CSS图片容器适配求助：图片无法填充/适配容器

针对你要让图片占满容器可用空间且不超出边界的需求，这里给出具体的样式调整方案：

关键修改步骤： #

1. 给图片的父容器（flex-1的div）添加overflow-hidden，防止图片超出容器后显示到外部
2. 给图片设置w-full h-full，强制图片占满容器的宽高空间
3. 根据适配需求选择object-fit属性：
   • object-cover：保持图片比例，裁剪超出部分填满容器（无留白，适合需要完全填充容器的场景）
   • object-contain：保持图片比例，完整显示图片（容器可能出现留白，但图片不会超出）
   • object-fill：拉伸图片填满容器（图片会变形，一般不推荐）

另外需给每个w-1/2的容器添加flex flex-col，确保内部的h-12栏和flex-1图片容器能正确分配垂直空间，避免flex-1无法获取剩余高度的问题。

修正后的代码： #

<div class="flex h-screen max-h-screen border-2">
  <div class="w-1/2 flex flex-col">
    <div class="h-12 bg-red-100">here</div>
    <div class="flex-1 border-2 border-red-200 overflow-hidden">
      <img class="w-full h-full object-cover" src="https://picsum.photos/2000/4000" alt="first image" />
    </div>
  </div>
  <div class="w-1/2 flex flex-col">
    <div class="h-12 bg-red-100">here</div>
    <div class="flex-1 border-2 border-red-200 overflow-hidden">
      <img class="w-full h-full object-contain" src="https://picsum.photos/200/300" alt="test" />
    </div>
  </div>
</div>

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