aspect-ratio: 1/1不生效主因是宽度不可算、height被显式设置或Grid轨道压制；fallback用padding-bottom: 100%+position定位更兼容，尤其在老浏览器或Flex/Grid嵌套场景。
直接用 aspect-ratio: 1 / 1 最省事，但得确认浏览器支持、父容器宽度可算、且没写死 height —— 否则 fallback 到 padding 技巧更稳。
为什么 aspect-ratio: 1 / 1 有时不生效
它不是“强制变方”，而是“按宽高比计算高度”。三个常见失效点：
-
width为auto且父容器没给约束（比如 flex 容器里没设flex-basis或min-width） - 写了
height、max-height或min-height—— 这些会直接覆盖aspect-ratio的高度计算 - 在 Grid 轨道中使用时，若轨道本身用
fr或auto定义高度，aspect-ratio可能被忽略（Grid 优先按轨道分配空间）
padding-bottom 百分比法的实操要点
这是兼容性最好、控制最细的方案，核心是让“高度由宽度驱动”：
- 容器必须设
width（百分比或固定值），height: 0，再配padding-bottom: [同 width 值]（如width: 30%→padding-bottom: 30%） -
padding-top也能用，但内容默认从顶部开始流，容易溢出到正方形上方；padding-bottom更稳妥 - 内容需脱离文档流：给容器加
position: relative，内容加position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别用
margin-bottom替代 —— 它不参与盒模型高度计算，撑不开容器
哪些场景该避开 aspect-ratio 直接上 padding 法
当遇到这些情况时，硬上 aspect-ratio 很可能白忙活：
- 项目需兼容 IE 或 Android 4.4–6.0 等老环境（
aspect-ratio在 Chrome 88+、Firefox 89+ 才稳定支持） - 盒子嵌套在 Flex 容器中，且父级没设明确
width或flex-shrink: 0，导致子元素width计算为auto - 需要精确控制内部文字行高、图片缩放或视频比例（
aspect-ratio只管容器框，不管内容溢出）
padding 法看似多两行 CSS，但它把宽高关系锁死在父宽上，不依赖运行时计算，也不怕 display 类型变化——这点在复杂布局里反而更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
