最干净的现代解法是 aspect-ratio: 1 / 1，需确保浏览器支持且不与 height 同时声明；它原生约束内容盒宽高比，比 padding hack 更直观可靠。
直接结论：用 aspect-ratio: 1 / 1 是最干净的现代解法，但必须确认目标浏览器支持（Chrome 88+、Firefox 89+、Safari 15.4+），且不能和 height 同时声明。
为什么 aspect-ratio 能直接替代 padding hack
它不是“模拟”宽高比，而是 CSS 原生约束内容盒（content box）的尺寸关系。只要元素有一个确定的宽度（比如 width: 100% 或 width: 200px），浏览器就会自动算出对应高度；反过来，给定高度也能反推宽度。这比靠 padding-top 撑高再绝对定位内容直观得多。
常见错误现象：aspect-ratio 写了但没生效 —— 大概率是同时写了 height: 200px，此时显式 height 会完全覆盖 aspect-ratio。
- 只设
width就够，height留空或设为auto - 若父容器用
flex，确保子项未被align-items: stretch拉伸变形（可加align-self: start） - 在 Grid 中，
aspect-ratio作用于每个 grid item，不是整个轨道
aspect-ratio 和 padding-bottom 能否共存做降级
能，但顺序和写法很关键。CSS 解析是自上而下覆盖的，而部分旧版 Safari 对 aspect-ratio 的实现会重置内部高度计算逻辑，导致 fallback 失效。
立即学习“前端免费学习笔记（深入）”；
正确写法（现代优先 + 兜底）：
.square {
width: 100%;
aspect-ratio: 1 / 1;
padding-bottom: 100%; /* 仅在不支持 aspect-ratio 的浏览器生效 */
}错误写法（padding 在前）：
.square {
width: 100%;
padding-bottom: 100%;
aspect-ratio: 1 / 1; /* 在支持者中可能被忽略，或导致高度异常 */
}- 不要混用
min-height或max-height，它们会干扰比例计算 - 如果用在图片容器里，记得加
object-fit: cover防止拉伸 - 服务端渲染（SSR）场景下，
aspect-ratio不会触发 FOUC，比 padding 方案更稳
响应式网格中 aspect-ratio 的实际落地细节
在 display: grid 布局里，aspect-ratio 必须写在 grid item 上，而不是 grid container。它不会影响轨道尺寸，只约束单个子项的内容盒。
例如四列响应式图标网格：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 16px;
}
.grid-item {
aspect-ratio: 1 / 1;
background: #eee;
}- 不用再写
position: relative和绝对定位子元素 - 文字、图片可直接流式布局，无需额外包裹层
- 小屏下
minmax(120px, 1fr)触发单列时，aspect-ratio仍保持正方形，不会因列宽变窄而压扁
真正容易被忽略的是：当容器本身被 transform、scale 或某些 flex 属性（如 flex-shrink: 0）干预时，aspect-ratio 的计算基准可能偏移——这种边界情况往往要到真机测试才暴露，别只信开发工具里的渲染结果。
