实现与项目数量无关的Flexbox正方形项（含图片适配解决方案）

我来帮你搞定这个Flexbox正方形盒子被图片撑开的问题——你遇到的情况很典型：用padding-top实现正方形比例时，插入图片后盒子高度会被额外撑开，但不用图片或用vw/vh单位时就正常。这是因为图片默认处于文档流中，它自身的尺寸会叠加在padding提供的高度上，导致盒子总高度超出预期的正方形比例。

下面给你两种可靠的解决方案：

方案1：使用CSS aspect-ratio 属性（推荐现代浏览器） #

这是最简洁的方法，直接给盒子设置宽高比为1:1，浏览器会自动维持正方形尺寸，同时配合object-fit让图片完美填充盒子且不变形。

修改后的CSS代码：

.container { 
  position: relative; 
  width: 90%; 
  max-height: 35%; 
  display: flex; 
  margin: 5%; 
  border: 5px solid black; 
  justify-content: space-around; 
}
.box { 
  position: relative; 
  width: 100%; 
  margin: 2.5%; 
  border: 5px solid blue; 
  overflow: hidden;
  aspect-ratio: 1/1; /* 核心：强制宽高比1:1 */
}
.image { 
  width: 100%; 
  height: 100%;
  object-fit: cover; /* 让图片覆盖盒子，保持原有比例 */
}

注意：aspect-ratio支持Chrome 88+、Firefox 89+、Safari 15.4+，如果需要兼容更旧的浏览器，建议用下面的传统方案。

方案2：padding-top + 图片绝对定位（兼容旧浏览器） #

这个方法的核心是把图片从文档流中移除，让盒子的高度完全由padding-top控制（基于宽度的100%，形成正方形），再通过绝对定位让图片填充整个盒子。

修改后的CSS代码：

.container { 
  position: relative; 
  width: 90%; 
  max-height: 35%; 
  display: flex; 
  margin: 5%; 
  border: 5px solid black; 
  justify-content: space-around; 
}
.box { 
  position: relative; 
  width: 100%; 
  margin: 2.5%; 
  border: 5px solid blue; 
  overflow: hidden;
  padding-top: 100%; /* 基于宽度的100%高度，形成正方形 */
}
.image { 
  position: absolute; /* 脱离文档流，不再撑开盒子 */
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

为什么这个方法有效？因为绝对定位的元素不会占据文档流空间，盒子的高度完全由padding-top:100%决定（等于盒子的宽度，完美正方形），图片只是覆盖在盒子内部，不会影响盒子的尺寸。

内容的提问来源于stack exchange，提问作者Michaela P.