Flexbox布局添加图片后网格变形，object-fit无效问题求助

问题出在你用伪元素padding-top:100%实现正方形容器时，图片未脱离文档流，导致容器被图片撑开，破坏了原有的正方形比例。以下是调整方案：

核心修改点 #

• 给图片的父容器添加position: relative，为图片的绝对定位提供参照
• 将图片设置为绝对定位，使其脱离文档流，不再影响容器尺寸
• 微调flex属性，确保列宽均匀分配

修改后的CSS代码 #

body {
    margin: 0;
}

#head .row {
    display: flex;
}

#head .row div {
    background: #ddd;
    flex: 1 0 0; /* 确保每列均匀分配宽度，不受内容影响 */
    height: auto;
    margin: 1px;
    position: relative; /* 添加相对定位 */
    overflow: hidden; /* 防止图片超出容器（使用cover时可选） */
}

#head .row div::before {
    content: '';
    float: left;
    padding-top: 100%;
}

#head img {
    position: absolute; /* 绝对定位脱离文档流 */
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover; /* 或contain，根据需求选择适配方式 */
}

原理说明 #

伪元素的padding-top:100%是基于容器宽度计算高度，以此实现正方形比例。但图片默认是块级元素，会占据文档流空间，导致容器高度被图片和伪元素共同撑开。通过绝对定位让图片脱离文档流后，容器高度完全由伪元素维持，图片的width:100%和height:100%就能精准铺满容器，object-fit也能正常生效，保证图片适配容器比例。

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