在 css grid 布局中，当两列内容类型不同（如文本容器 vs 图片）时，需确保父容器设为 grid 并启用高度继承机制，关键在于让图片元素继承父网格单元的高度，而非依赖自身原始尺寸。
在 css grid 布局中，当两列内容类型不同（如文本容器 vs 图片）时，需确保父容器设为 grid 并启用高度继承机制，关键在于让图片元素继承父网格单元的高度，而非依赖自身原始尺寸。
要实现 40% / 60% 两列等高布局（左侧为文字 .wrapper，右侧为 <img>），核心在于：Grid 容器自动拉伸子项高度，但图片默认不响应 height: 100%，除非其父级（即网格单元）具有明确高度，且图片自身设置 height: 100% + object-fit 控制缩放行为。
✅ 正确做法（三步到位）
确保 Grid 容器启用显式高度继承链
在 @media (min-width: 992px) 中，除设置 display: grid 和 grid-template-columns: 40% 60% 外，还需让网格项（grid items）默认拉伸填满行高 —— 这由 align-items: stretch（Grid 默认值）保障，无需额外声明。-
为 <img> 显式设置 height: 100% 并配合 object-fit
仅设 width: 100% 不足以撑满高度；必须添加：#sec-1 img { width: 100%; height: 100%; /* 关键：继承网格单元高度 */ object-fit: cover; /* 可选：保持比例并裁剪填充 */ display: block; } -
确保父网格单元具备可继承的高度
Grid 会为每列分配相同行高（基于内容最高者），因此只要 .wrapper 有足够内容或最小高度，右侧图片即可自然匹配。若文字区域过短，可添加 min-height 强制基线一致：#sec-1 .wrapper { padding: 50px; background-image: linear-gradient(to bottom right, #a454fd, #2b05df); color: white; min-height: 300px; /* 可选：设定最小基准高度 */ }
? 完整推荐 CSS 片段（适配断点）
/* Large devices only */
@media only screen and (min-width: 992px) {
#sec-1 {
display: grid;
grid-template-columns: 40% 60%;
gap: 0; /* 如需间距可设 */
}
#sec-1 .wrapper,
#sec-1 img {
/* 网格项自动 stretch，但 img 需显式 height */
}
#sec-1 img {
width: 100%;
height: 100%;
object-fit: cover; /* 或 contain，依设计需求选择 */
display: block;
}
}⚠️ 注意事项
- height: 100% 生效前提：父元素（即 #sec-1 的第二个网格单元）必须有明确高度 —— Grid 行高由内容决定，因此确保 .wrapper 内容足够或设 min-height。
- 避免 vertical-align 干扰：display: block 已消除图片默认的基线对齐问题。
- 响应式兼容性：小屏下建议退回块级堆叠（移除 grid），本方案仅在 ≥992px 生效，符合语义化断点逻辑。
- 无障碍增强：为图片添加 alt 描述，并考虑用 aria-labelledby 关联标题，提升可访问性。
通过以上配置，无论文字长短或图片原始尺寸如何，两列将在大屏下严格等高，视觉统一且语义清晰。
