两列Grid布局中图片溢出容器，求无自定义宽高的适配方案

核心问题分析 #

布局异常的原因：

• .grid仅设置max-height，未明确行高约束，图片加载后容易撑开容器，导致Grid无法维持预设高度
• .box1/.box2用height:50%依赖父元素高度计算，当图片引发高度计算偏差时，就会出现溢出

修复方案 #

调整CSS代码，实现图片完美适配容器且兼容任意尺寸：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid {
  background: green;
  width: 100%;
  height: 70vh; /* 替换max-height为固定height，明确Grid容器高度 */
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.col1 {
  background: red;
}

.col2 {
  background: orange;
  display: flex; /* 用flex布局让子容器自动均分高度 */
  flex-direction: column;
}

.box1, .box2 {
  flex: 1; /* 让两个容器均分.col2的高度 */
  border: 1px solid black;
  overflow: hidden; /* 防止图片超出容器范围 */
}

.box2 {
  border-color: blue; /* 单独设置box2的边框颜色 */
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并填充容器 */
}

方案说明 #

• 将.grid的max-height改为height：明确容器高度，避免图片撑开布局
• .col2使用flex垂直布局：让.box1和.box2自动平分父容器高度，无需手动设置height:50%，适配更灵活
• 给.box1/.box2加flex:1：确保两个容器均分.col2的可用高度
• 添加overflow:hidden：避免图片因object-fit:cover裁剪的部分溢出容器

修改后，无论图片原始尺寸如何，都会按比例填充容器，Grid布局也能保持稳定。

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