如何用CSS实现元素宽高比固定？

aspect-ratio是现代CSS中唯一原生、声明式控制Grid项宽高比的方式，需作用于grid-item本身，Chrome 88+、Firefox 89+、Safari 15.4+支持；旧版Safari需用padding-top百分比+absolute定位兜底，并设min-height:0防塌陷。

aspect-ratio 是现代 CSS 中最直接的解法，但是否可用，取决于你必须支持的浏览器版本。

用 aspect-ratio 实现固定宽高比（推荐优先尝试）

只要目标环境是 Chrome 88+、Firefox 89+、Safari 15+ 或 Edge 88+，就该首选 aspect-ratio。它不依赖额外 DOM 结构，语义清晰，且浏览器自动计算高度（或宽度），无需手动算百分比。

1. 写法简单：aspect-ratio: 16 / 9、aspect-ratio: 1 / 1、aspect-ratio: 4 / 3 都合法；浮点数如 aspect-ratio: 1.77 也行
2. 必须配合一个明确的尺寸维度：比如设 width: 100% 或 width: 30vw，浏览器才据此推导另一方向尺寸
3. 不能和 height 同时设为具体值（如 height: 200px），否则会冲突——aspect-ratio 会被忽略
4. 常见错误：给元素同时设 width 和 height 百分比，再加 aspect-ratio，结果比例失效，因为百分比高度依赖父高，而父高可能为 auto

用 padding-top + position: absolute 模拟（兼容性 fallback）

当需要支持 Safari 14 或更老版本、或某些 Android WebView 时，aspect-ratio 不可用，就得退回 padding 技术。核心是利用 padding-top 的百分比基于父容器宽度计算这一特性。

1. 公式固定：padding-top 值 = (目标高度 ÷ 目标宽度) × 100，例如 4:3 → padding-top: 75%，16:9 → padding-top: 56.25%
2. 必须用包裹容器承载 padding，而不是直接写在内容元素上；否则内容会被挤出可视区
3. 包裹容器需设 position: relative，内部内容元素设 position: absolute; top: 0; left: 0; width: 100%; height: 100%
4. 别漏掉 height: 0 —— 否则 padding-top 会叠加在原有高度上，导致整体过高

为什么不用 height: 50% 或 padding-bottom？

height: 50% 看似简洁，但它依赖父元素有明确高度，而响应式布局中父高常为 auto，结果就是高度塌陷。至于 padding-bottom，虽然计算逻辑一样（也基于父宽），但若内容需顶部对齐，padding-top 更直观可控；用 padding-bottom 时，内容默认沉底，得额外加 top: 0 和负 margin 补偿，容易出错。

1. padding-top 和 padding-bottom 在百分比计算上完全等价，选哪个纯看内容定位习惯
2. 绝对不要对同一元素既设 padding-top 又设 height，尤其当 height 是具体值时，会导致盒模型溢出
3. 如果父容器本身是 flex item，注意 align-items: stretch 可能干扰 padding 高度表现，建议显式设 align-self: flex-start

居中这个固定比例盒子的注意事项

无论用哪种方案，aspect-ratio 或 padding 都只管“内部比例”，不管“盒子在哪”。要真正居中，得在外层加布局控制。

1. 最稳妥：外层容器设 display: flex; justify-content: center; align-items: center，包裹容器加 flex: none 防止被拉伸
2. 避免对包裹容器同时设 position: fixed 和 margin: auto —— 多数浏览器不认，得配 top: 0; bottom: 0; left: 0; right: 0 才生效
3. 若用 transform: translate(-50%, -50%) 居中，务必确保包裹容器有明确 top 和 left 偏移（如 top: 50%; left: 50%），否则 transform 无基准

实际项目里，aspect-ratio 能用就用，降级逻辑用 @supports 包一层即可。真正麻烦的不是写法，而是忘记检查父容器是否参与了 flex/grid 布局、是否被 overflow: hidden 截断，或者在移动端误开了 viewport 缩放——这些都会让比例“看起来不对”。