如何强制img元素完全继承其父容器的宽度与高度？

• Grid容器仅设置了列模板规则，未显式指定行高，grid-template-rows默认值为auto，此时Grid行高会优先适配子项内容的高度。你给.div1设置的height: 100%缺少明确的百分比计算基准，浏览器会默认忽略该设置，转为由内部图片的原始高度撑开.div1的高度。
• 图片属于行内替换元素，默认存在约3px的基线对齐间隙，也会额外增加父元素的高度。

两种修改方案任选其一即可实现预期效果：

方案1：显式指定Grid行高 #

给.container新增grid-template-rows: 100%配置，明确Grid行高为容器高度的100%，让.div1的百分比高度有明确的计算参考：

.container {
  height: 500px;
  max-height: 500px;
  display: grid;
  grid-template-columns: 50% 50%;
  /* 新增配置 */
  grid-template-rows: 100%;
}

方案2：限制Grid子项的溢出行为 #

给.div1新增overflow: hidden配置，限制内部元素无法撑破父元素的高度边界，同时可给图片添加display: block消除行内元素默认的基线间隙：

.container .div1 {
  height: 100%;
  /* 新增配置 */
  overflow: hidden;
}
.container .div1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 可选新增配置，消除基线间隙 */
  display: block;
}

修改后.div1会固定为500px高度，图片也会完全适配父元素宽高，不会再出现被撑高的问题。

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