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 结构，语义清晰，且浏览器自动计算高度（或宽度），无需手动算百分比。
- 写法简单：
aspect-ratio: 16 / 9、aspect-ratio: 1 / 1、aspect-ratio: 4 / 3都合法；浮点数如aspect-ratio: 1.77也行 - 必须配合一个明确的尺寸维度：比如设
width: 100%或width: 30vw，浏览器才据此推导另一方向尺寸 - 不能和
height同时设为具体值（如height: 200px），否则会冲突——aspect-ratio会被忽略 - 常见错误：给元素同时设
width和height百分比，再加aspect-ratio，结果比例失效，因为百分比高度依赖父高，而父高可能为auto
用 padding-top + position: absolute 模拟（兼容性 fallback）
当需要支持 Safari 14 或更老版本、或某些 Android WebView 时，aspect-ratio 不可用，就得退回 padding 技术。核心是利用 padding-top 的百分比基于父容器宽度计算这一特性。
- 公式固定：
padding-top值 = (目标高度 ÷ 目标宽度) × 100，例如 4:3 →padding-top: 75%，16:9 →padding-top: 56.25% - 必须用包裹容器承载
padding，而不是直接写在内容元素上；否则内容会被挤出可视区 - 包裹容器需设
position: relative，内部内容元素设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 别漏掉
height: 0—— 否则padding-top会叠加在原有高度上，导致整体过高
为什么不用 height: 50% 或 padding-bottom？
height: 50% 看似简洁，但它依赖父元素有明确高度，而响应式布局中父高常为 auto，结果就是高度塌陷。至于 padding-bottom，虽然计算逻辑一样（也基于父宽），但若内容需顶部对齐，padding-top 更直观可控；用 padding-bottom 时，内容默认沉底，得额外加 top: 0 和负 margin 补偿，容易出错。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
padding-top和padding-bottom在百分比计算上完全等价，选哪个纯看内容定位习惯 - 绝对不要对同一元素既设
padding-top又设height，尤其当height是具体值时，会导致盒模型溢出 - 如果父容器本身是 flex item，注意
align-items: stretch可能干扰 padding 高度表现，建议显式设align-self: flex-start
居中这个固定比例盒子的注意事项
无论用哪种方案，aspect-ratio 或 padding 都只管“内部比例”，不管“盒子在哪”。要真正居中，得在外层加布局控制。
立即学习“前端免费学习笔记（深入）”；
- 最稳妥：外层容器设
display: flex; justify-content: center; align-items: center，包裹容器加flex: none防止被拉伸 - 避免对包裹容器同时设
position: fixed和margin: auto—— 多数浏览器不认，得配top: 0; bottom: 0; left: 0; right: 0才生效 - 若用
transform: translate(-50%, -50%)居中，务必确保包裹容器有明确top和left偏移（如top: 50%; left: 50%），否则 transform 无基准
aspect-ratio 能用就用，降级逻辑用 @supports 包一层即可。真正麻烦的不是写法，而是忘记检查父容器是否参与了 flex/grid 布局、是否被 overflow: hidden 截断，或者在移动端误开了 viewport 缩放——这些都会让比例“看起来不对”。 
