为何Grid布局的div中图片无法被容器约束？Chrome存在该问题

问题复现 #

固定宽高的Grid容器div#div53中，图片img#img60设置了max-width:100%和max-height:100%，但图片未被容器约束出现溢出；移除Grid布局后恢复正常，且该问题仅出现在Chrome，Firefox表现正常。

原因分析 #

Chrome对Grid布局中替换元素（如img）的尺寸约束逻辑与Firefox存在差异：Grid容器默认的align-items: stretch和justify-items: stretch会让图片尝试填充轨道空间，导致max-width/max-height的约束被忽略，而Firefox则会优先应用图片的尺寸限制规则。

解决方案 #

以下几种方法均可解决该问题：

• 修改Grid容器对齐方式：给div#div53添加align-items: start和justify-items: start，取消默认的拉伸行为，让图片基于容器尺寸进行约束：

#div53 {
  width: 300px;
  height: 200px;
  display: grid;
  align-items: start;
  justify-items: start;
}

• 强制图片继承容器尺寸：给img#img60添加width: 100%（或height:100%），配合object-fit: contain保持图片比例：

#img60 {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  object-fit: contain;
}

• 明确Grid轨道尺寸：给Grid容器指定轨道尺寸与容器宽高一致，确保轨道能正确约束图片：

#div53 {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
}

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