aspect-ratio: 1 / 1 实现正方形需满足三前提：元素有明确宽度、未设 height、浏览器支持（chrome 88+/firefox 89+/safari 15.4+）；最常见失效原因是显式声明 height，因其优先级高于 aspect-ratio。
直接用 aspect-ratio: 1 / 1 就能实现，但必须满足三个前提：元素有明确宽度、不设 height、目标浏览器支持（Chrome 88+ / Firefox 89+ / Safari 15.4+）。
为什么 aspect-ratio: 1 / 1 没生效
最常见原因是显式写了 height —— 只要声明了 height: 200px 或 height: 100%，aspect-ratio 就会被完全忽略。浏览器只认一个高度来源，height 优先级高于 aspect-ratio。
- 检查是否误加了
height、min-height或max-height；这些都会覆盖比例计算 - 在 Flex 容器中，子项若没设
flex-basis或width，且父容器是align-items: stretch（默认），aspect-ratio可能不触发——加个align-self: start或显式width: 100%即可 - Grid 中必须把
aspect-ratio写在 item 上，而不是 container；它不控制轨道，只约束单个子项的内容盒
图片内容怎么填满又不拉伸
aspect-ratio: 1 / 1 只管容器形状，不管里面图片怎么显示。不加控制的话，img 默认会按原始尺寸渲染，小图居中、大图溢出。
- 给图片加
width: 100%; height: 100%; object-fit: cover;→ 裁切填充，适合封面图、头像等强调视觉主体的场景 - 改用
object-fit: contain;→ 等比缩放并完整显示，适合图标、带文字说明的卡片 - 别用
object-fit: fill，它会强制拉伸变形 - 确保图片没内联
width或height属性，否则 SSR 或首屏渲染时可能抖动
如何安全兼容旧版 Safari（≤ 15.4）
不能只靠 aspect-ratio，得用 padding-bottom: 100% 降级，但顺序和写法极其关键。
- 必须先写
aspect-ratio: 1 / 1，再写padding-bottom: 100%；支持者忽略后者，不支持者取后者 - 外层容器加
position: relative，图片或内容加position: absolute; top: 0; left: 0; width: 100%; height: 100%—— 不能用height: 100%，因为父高是 auto，计算结果为 0 - 父容器不能设
height，否则 padding 撑高失效；如果是 Flex 子项，加min-width: 0防止 flex shrink 导致宽度基准丢失 - 不要指望容器查询（
@container）替代这个 fallback，目前它无法触发基于宽高的比例推算
真正容易被忽略的是：哪怕用了 aspect-ratio，如果图片本身没配 object-fit，正方形容器里依然会出现大片留白或严重拉伸——比例是容器的，显示逻辑是图片自己的，这两件事必须分开处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
