如何让CSS Grid中图片最大高度匹配另一单元格高度？

直接修改代码即可实现需求，核心是通过flex布局让图片容器匹配输入框列的高度，并限制图片缩放范围：

<div class="grid grid-flow-col gap-5">
    <figure class="max-w-lg h-full flex flex-col">
        <img
            class="flex-1 object-contain max-h-full rounded-lg"
            src="https://avatars.githubusercontent.com/u/98087889?s=40&v=4"
            alt="image description"
        />
        <figcaption class="mt-2 text-sm text-center">
            Avatar
        </figcaption>
    </figure>
    <div class="space-y-4">
        <div>
            <label class="block mb-2">Input</label>
            <input
                class="block w-full p-2.5"
            />
        </div>
        <div>
            <label class="block mb-2">Input</label>
            <input
                class="block w-full p-2.5"
            />
        </div>
    </div>
</div>

关键修改说明： #

• 给<figure>加h-full：让图片容器占满Grid单元格高度，和输入框列高度对齐。
• 给<figure>加flex flex-col：把figure内部改成垂直flex布局，让图片和figcaption自动分配空间。
• 给<img>加flex-1：让图片填充figure中除figcaption外的剩余高度。
• 给<img>加object-contain：保持图片宽高比例，避免拉伸变形。
• 给<img>加max-h-full：确保图片高度不会超出容器范围。

调整后图片最大高度会被限制在输入框列的高度内，同时按比例缩放，不会出现超出或空白区域。

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