aspect-ratio: 1 / 1 仅在现代浏览器（chrome 88+、firefox 89+、safari 15.4+）且父容器提供明确宽度基准时生效；旧版需降级为 padding-top: 100% 配合 position: relative/absolute 和 overflow: hidden 实现兼容正方形。
aspect-ratio: 1 / 1 是最直接的解法，但仅当浏览器支持（Chrome 88+、Firefox 89+、Safari 15.4+）且你控制得了父容器行为时才真正生效。老版本 Safari 或需要兼容 IE 的项目，必须回退到 padding-top 百分比方案。
为什么 aspect-ratio: 1 / 1 单独写没用？
它只在元素有明确宽度来源时才起作用。Flex/Grid 子项若没设 width、flex-basis 或轨道约束，浏览器会按内容撑开宽度，aspect-ratio 就失去计算基准。
- 常见错误：
.item { aspect-ratio: 1 / 1; }但没配flex: 0 0 calc(33.333% - 2vmin)或grid-column: span 1 - Flex 容器中，
flex: 1或flex-grow: 1会让子项拉满剩余空间，aspect-ratio被宽度覆盖，高度无法响应 - Grid 中若用了
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)))，则每个格子宽度不固定，aspect-ratio仍生效，但高度会随宽度动态缩放——这反而是优点
padding-top: 100% 方案怎么避免内容溢出？
核心是让 padding 撑高、内容脱离文档流、容器截断溢出。漏掉任意一环都会导致正方形“塌陷”或“撑开”。
- 父容器必须设
position: relative和height: 0，否则padding-bottom: 100%会叠加在内容高度上 - 子内容需
position: absolute; top: 0; left: 0; width: 100%; height: 100%，且父容器加overflow: hidden -
<img>标签要加display: block，否则行内默认行为会在底部留空白间隙 - 若内容含长文本，建议加
word-break: break-word或限制font-size，防止文字撑破边界
Grid/Flex 布局中正方形失真的三大隐性干扰点
不是属性写错了，而是被其他样式悄悄覆盖了盒模型行为。
-
align-items: stretch（Flex 默认）或align-content: stretch（Grid 默认）会强制子项拉高，必须显式设为flex-start或start - 子项上有
min-width: 0缺失——尤其当内部再嵌套 Flex 容器时，flex-shrink: 1可能把它压成一条线 - 祖先元素用了
contain: layout或transform，会切断aspect-ratio的尺寸继承链，此时只能换回padding方案
真正卡住的点，往往藏在你没动过的那几行 CSS 里：比如某层父容器默默加了 min-height: 200px，或者 box-sizing 没统一导致 gap 计算偏差。先关掉所有可能影响尺寸的显式高宽和对齐方式，再逐条加回来验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
