最稳定、兼容性最好的方案是 padding-bottom 百分比 + position: absolute；因其利用 padding 百分比始终基于父宽计算的特性，可靠实现宽度驱动高度，且在 IE11 等旧浏览器中完全可用。
直接说结论：用 padding-bottom 百分比 + position: absolute 是最稳定、兼容性最好的方案；容器查询（@container）目前尚不能直接驱动正方形比例，不推荐用于此场景。
为什么 padding-bottom 百分比能做出正方形
因为 padding 的百分比值在块级上下文中始终相对于**父容器宽度**计算，哪怕用在 padding-bottom 上也一样。这就提供了一个“宽度驱动高度”的可靠钩子。
常见错误是试图用 height: 100% 或 aspect-ratio 配合 flex/grid 自动撑开——但它们依赖父容器有明确高度，而响应式网格通常嵌套在流式布局里，父高往往为 auto，导致失效。
- 必须给容器设
position: relative，否则内部绝对定位会脱出上下文 - 子元素需设
position: absolute; top: 0; left: 0; width: 100%; height: 100%才能填满这个“padding 造出来的高” - 避免对子元素直接设
height: 100%——它在无显式父高的情况下计算结果为 0
完整可复用的正方形网格结构
以下代码可直接用于 CSS Grid 或 Flex 布局中的每个网格项：
.grid-item {
position: relative;
width: 100%;
padding-bottom: 100%; /* 关键：宽高比 1:1 */
background: #eee;
}
<p>.grid-item > <em> {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/</em> 内容可自由排版，比如加文字、图片等 */
}</p>
配合 Grid 使用时，父容器只需常规设置：
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 12px;
}
注意：minmax(200px, 1fr) 控制单列最小宽度，但不会干扰子项自身的正方形逻辑——因为每个 .grid-item 都独立通过 padding-bottom 锁定比例。
aspect-ratio 能不能替代？要看场景
aspect-ratio: 1 / 1 看起来更直观，但它有硬伤：
- 在 Flex 容器中，若父容器未设
align-items: stretch（默认就是），子项可能被压缩或拉伸 - 在 Grid 中，若行轨道用
auto或min-content，aspect-ratio可能被忽略 - IE 和 Safari ≤ 15.4 完全不支持，即使加前缀也无效
- 它无法像
padding-bottom那样触发父容器“感知高度”，对后续兄弟元素的流式布局影响更难预测
所以除非你明确控制了整个布局链（比如父容器固定宽高、且只支持现代浏览器），否则别拿 aspect-ratio 当主力。
容器查询（@container）为什么不适合做正方形
容器查询本身不提供“根据容器宽高比生成样式”的能力。你无法写 @container (aspect-ratio: 1) 或类似条件——CSS 规范至今没定义这类语法。
目前 @container 只支持 width、inline-size、block-size（且后者需父容器设 container-type: size 并有明确尺寸），但这些值都是绝对长度，不是比例关系。
换句话说：你可以用容器查询响应“这个卡片容器变窄了”，但没法让它自动变成正方形——还得靠 padding-bottom 或 aspect-ratio 这类底层机制来实现比例，容器查询只是个触发开关而已。
真正容易被忽略的是：正方形的“稳定性”不取决于你怎么声明比例，而取决于**这个比例是否在文档流中真实占据空间**。padding-bottom 做到了，aspect-ratio 在部分上下文中做到了，其余方案大多只是视觉欺骗。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
