CSS Grid布局下Chrome中图片溢出网格高度问题排查与解决

问题描述 #

使用CSS Grid实现左侧文本、右侧图片的70vh高两栏布局，Firefox显示正常，但Chrome中图片持续溢出网格高度，仅能通过设置绝对数值临时修复，希望了解成因及规避方法。

原始代码 #

HTML #

<div class="hero">
  <article>
    <h1>Access a library of free design resources</h1>
    <p>The best resources and books from around the web, collected and curated for your reading.</p>
    <a href="">Get Access Now</a>
  </article>
  <img src="https://picsum.photos/500/500" alt="">
</div>

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid red;
}

html {
  font-family: sans-serif;
}

header {
  display: flex;
  height: 3.5rem;
  justify-content: space-between;
  margin: 0 2rem;
}

header>* {
  display: flex;
  align-items: center;
  gap: 1rem;
}

span {
  height: 2rem;
  display: flex;
  align-items: center;
}

a {
  text-decoration: none;
}

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 70vh;
}

img {
  object-fit: cover;
  width: 100%;
  max-height: 100%
}

问题成因 #

Chrome和Firefox对Grid容器中max-height:100%的解析逻辑存在差异：

• Firefox中，图片的max-height:100%会正确继承Grid单元格的高度（由容器height:70vh限制）。
• Chrome中，图片的父容器（Grid单元格）默认没有明确的高度值，max-height:100%无法找到有效参照，导致图片按原始尺寸渲染，超出Grid容器高度。

修复方案 #

有两种常用的无绝对数值修复方式：

方式1：给Grid容器显式定义行高 #

修改.hero的CSS，添加grid-template-rows: 1fr，强制单元格高度匹配容器高度：

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr; /* 新增行高定义 */
  height: 70vh;
}

方式2：让图片高度设为100% #

将图片的max-height:100%改为height:100%，直接强制图片高度匹配单元格高度：

img {
  object-fit: cover;
  width: 100%;
  height: 100%; /* 替换max-height */
}

CSS Grid布局避坑技巧 #

• 当使用百分比高度时，确保父元素（包括Grid单元格）有明确的高度参照，避免浏览器解析歧义。
• 对于Grid容器，若需要单元格高度匹配容器，显式设置grid-template-rows或依赖默认的align-items: stretch（需确保单元格内容不会强行撑开高度）。
• 处理图片时，结合object-fit和明确的宽高值，优先使用height:100%而非max-height:100%来强制匹配容器尺寸，减少跨浏览器渲染差异。

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