如何在CSS Grid中约束高度、防止溢出并保持图片宽高比？

解决方案代码 #

<div class="h-[80vh] overflow-hidden">
  <div class="h-full max-w-full grid grid-cols-[repeat(3,min-content)] grid-rows-[repeat(3,min-content)] gap-0">
    <img src="/images/top-left@3x.png" class="max-h-full w-auto" />
    <img src="/images/top-center@3x.png" class="max-h-full w-auto" />
    <img src="/images/top-right@3x.png" class="max-h-full w-auto" />
    <img src="/images/left@3x.png" class="max-h-full w-auto" />
    <img src="/images/center@3x.png" class="max-h-full w-auto" />
    <img src="/images/right@3x.png" class="max-h-full w-auto" />
    <img src="/images/bottom-left@3x.png" class="max-h-full w-auto" />
    <img src="/images/bottom-center@3x.png" class="max-h-full w-auto" />
    <img src="/images/bottom-right@3x.png" class="max-h-full w-auto" />
  </div>
</div>

关键调整说明 #

• 父容器约束：h-[80vh] overflow-hidden 固定容器高度为视口80%，同时隐藏溢出内容，彻底避免切片超出容器范围。
• Grid容器适配：
  • h-full 继承父容器高度，确保Grid整体受80vh约束；
  • max-w-full 限制Grid最大宽度不超过父容器，防止横向溢出；
  • grid-cols-[repeat(3,min-content)]/grid-rows-[repeat(3,min-content)] 让列宽和行高由切片自身的最小尺寸（即保持原始宽高比的尺寸）决定，既保证切片完整展示，又不会强制拉伸变形。
• 图片比例控制：每个img设置max-h-full w-auto，限制图片最大高度不超过所在单元格高度，宽度自动按原始比例计算，完美保持切片的宽高比。

关于Grid选型的补充 #

你提到担心是XY问题，但Grid确实适合这类场景：后续如果需要调整切片布局（比如跨列/跨行展示）、添加间距或动画效果，Grid的布局模型会比Flex更灵活可控，无需大幅重构代码。

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