CSS Grid布局内图片设置overflow:hidden无效，无法自适应填满网格并裁剪溢出内容

当前代码存在的核心问题 #

• 存在低级拼写错误：#broadcastProductionImage1 内的 justify-self 被误写为 justidy-self，该对齐属性完全未生效
• 对object-fit的作用逻辑存在理解偏差：object-fit: cover 仅能在img元素自身的宽高盒子范围内控制图片内容的填充裁切，没有给img设置明确的宽高占满对应网格轨道，img仍保持图片的固有尺寸，此时object-fit完全没有可作用的约束框架
• 无效属性冗余：给img本身设置overflow: hidden没有实际作用，原生替换元素（img/video）的自身内容裁切不依赖该属性，也不会因为这个属性触发裁剪
• 父容器的overflow: hidden其实已经生效，但由于img没有撑满对应轨道，仅保持固有尺寸居中放置，图片既没有填满区块，裁切的视觉效果也和预期不符
• 潜在布局bug：装饰元素#broadcastSlash没有指定明确的网格定位，默认会落在第一块网格区域内，和第一个图片重叠
• 之前尝试的min-width/min-height方案失效的原因：min属性会强制突破网格轨道的尺寸限制，把网格轨道本身撑大，最终导致布局偏离预设的50%/50%分块

最终修正实现 #

核心逻辑：先让每个img100%贴合对应网格轨道的尺寸，再用object-fit: cover自动处理图片缩放与裁切，全程不需要写死固定像素值，完全保留动态适配能力。
修正后的CSS代码：

.serviceGridImage {
    display: grid;
    height: 40rem;
    grid-template: 50% 50% / 100%;
    overflow: hidden;
}
#broadcastProductionImage1 {
    /* 取消居中对齐，让元素自然拉伸占满整个网格轨道 */
    justify-self: stretch;
    align-self: stretch;
    /* 关键：宽高100%贴合轨道尺寸，不写死固定值 */
    width: 100%;
    height: 100%;
    /* 此时object-fit会在100%尺寸的盒子内自动等比裁切图片 */
    object-fit: cover;
    grid-area: 1 / 1 / 2 / 2;
}
#broadcastProductionImage2 {
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-area: 2 / 1 / 3 / 2;
}
/* 给装饰slash元素指定跨全区域的定位，避免布局错位 */
#broadcastSlash {
    grid-area: 1 / 1 / 3 / 2;
    /* 根据需求设置层级在图片上层即可 */
}

方案特性：全程依赖Grid轨道的动态尺寸做适配，没有硬编码的图片宽高值，父容器尺寸变化时，两个img会自动跟随轨道调整大小，object-fit: cover会自动完成图片的等比缩放、居中、溢出裁切，不需要额外计算图片偏移，也不会出现轨道被图片撑大的问题。

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