关于CSS定位与object-fit:contain配合overflow:hidden的布局疑问

咱们来逐个拆解你遇到的这两个Grid布局和图片适配的问题哈：

先看你加定位的情况：
当你给.container设置position:relative，子元素img设为position:absolute时，绝对定位的img会脱离正常文档流——这意味着它的尺寸不会影响父容器.container的大小。而.container作为Grid项目，已经设置了width:100%; height:100%;，它会严格遵守Grid分配的单元格尺寸（也就是repeat(3,1fr)和repeat(4,1fr)定义的等比例网格），所以整个Grid布局显示正常。

但移除定位后就不一样了：
此时img是正常文档流中的块级元素，你给它设置了height:100%; width:auto，这时候img会按照自身的宽高比（你的示例是512px×768px，宽高比2:3）自动计算宽度。如果Grid单元格的宽高比不等于2:3，那么img计算出来的宽度就会超过.container的宽度（比如单元格宽高比是1:1，img的height是100%，宽度就会是150%）。

而Grid项目默认是可以被内容撑开的（除非你用minmax限制或者固定尺寸），.container被img撑开后，就会打破Grid原本设定的1fr比例，导致整个网格尺寸不再符合预期。

首先得明确object-fit:contain的作用：它是控制图片在自身内容框内的显示方式，会保持图片宽高比，让图片完整显示的同时尽可能填满内容框。但你的写法里，给img设置了height:100%; width:auto——这时候img的内容框高度是.container的100%，但宽度会根据图片的宽高比自动计算，这个宽度很可能会超过.container的宽度（比如.container宽高比大于2:3时，img的宽度就会超出）。

在默认情况下，.container的overflow是visible，所以img超出容器的部分会直接显示在外面，看起来就像是“图片尺寸没被控制住”。而加上overflow:hidden之后，.container会把超出自身边界的部分裁剪掉，只保留内容框内用object-fit:contain渲染的图片区域，视觉上就达到了你想要的“控制图片尺寸”的效果。

顺便提一句，如果你不想用overflow:hidden，也可以调整img的尺寸设置：给img同时设width:100%; height:100%;，再配合object-fit:contain，这样img的内容框和.container完全一致，object-fit会直接在这个框内适配图片，就不会有超出的问题了。

内容的提问来源于stack exchange，提问作者j.xiang