如何让图片填满CSS自定义Grid布局的单元格？

问题原因 #

你的图片仅设置了width:100%，未指定高度，导致纵向无法撑满Grid单元格；且图片默认是行内块元素，可能存在默认间距影响填充效果。

修复代码 #

更新.a img的CSS规则：

.a img{
    width: 100%;
    height: 100%; /* 让图片高度填满父容器 */
    object-fit: cover; /* 保持图片比例，裁剪超出部分 */
    display: block; /* 消除行内块元素的默认间距 */
}

额外检查项 #

• 确认Grid容器.two的grid-template-rows: 1fr 1fr正常生效，保证单元格有明确高度分配
• 若需完整显示图片而非裁剪，可将object-fit:cover改为object-fit:fill（会拉伸图片适配容器）

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