aspect-ratio比padding-top更可靠，因其是原生CSS属性，直接约束盒模型、不依赖定位或内容撑开，支持响应式缩放与object-fit等现代布局特性；而padding-top需absolute定位、语义差、易失真且难微调。
aspect-ratio 能直接锁定盒子宽高比，但浏览器兼容性差、fallback 机制必须手动写，且不能替代 object-fit 控制图片内容填充方式。
为什么 aspect-ratio 比 padding-top 技巧更可靠
传统用 padding-top: 56.25%（16:9）模拟比例，本质是靠内边距撑开高度，依赖 position: relative + position: absolute 子元素定位，结构脆弱、语义不清、难以响应式微调。而 aspect-ratio 是原生 CSS 属性，直接作用于盒模型本身，浏览器按比例计算高度，不依赖定位或内容撑开。
它对任何块级元素都生效（div、section、img），只要不是 display: inline 或被 flex-shrink: 0 强制锁死尺寸的极端情况。
常见误用：只给 img 设 aspect-ratio 却没配 object-fit —— 这只能保证容器不变形，图片内容仍可能拉伸或留白。
Chrome/Firefox 支持了，Safari 15.4+ 也行，但旧版 Safari 和 IE 完全不认
aspect-ratio 在 Chrome 88+、Firefox 89+、Edge 88+、Safari 15.4+ 均已支持。但 Safari 15.0–15.3 和所有 IE 版本会忽略该声明，导致盒子塌陷或按内容高度渲染。
必须用 @supports 包裹并提供降级：
div.card {
width: 100%;
/* fallback: 用 padding-top 撑高 */
padding-top: 56.25%; /* 16:9 */
position: relative;
}
@supports (aspect-ratio: 16/9) {
div.card {
padding-top: 0;
aspect-ratio: 16/9;
height: auto;
}
}
注意：降级方案中，若子元素需绝对定位（如标题、按钮），仍要保留 position: relative；但主容器高度由 aspect-ratio 决定后，height: auto 才有意义。
和 flex/grid 一起用时，flex-basis 或 grid-template-rows 优先级更高
在 Flex 容器中，如果给子项同时设了 flex-basis: 200px 和 aspect-ratio: 1/1，浏览器会优先尊重 flex-basis 的宽度，再按比例推算高度 —— 这没问题；但如果 flex-basis 是百分比（如 flex-basis: 33%），而父容器宽度未稳定，aspect-ratio 可能无法正确触发。
Grid 中同理：grid-template-rows: 1fr 会覆盖 aspect-ratio 对高度的控制，除非显式写成 grid-template-rows: 1fr / auto 并配合 align-items: start。
关键点列表：
- 在 Flex 容器中，
aspect-ratio仅影响交叉轴（cross axis）高度，主轴（main axis）仍由flex-basis或内容决定 - 避免对同一元素同时设
height和aspect-ratio，后者会被忽略 - 在 Grid 中，
aspect-ratio对grid-area无效，只对直接子元素生效 - 服务端渲染（SSR）场景下，部分框架（如 Next.js）可能因 hydration 不一致导致首次渲染无
aspect-ratio效果，需加useEffect或 CSS 注入时机控制
图片容器用了 aspect-ratio，但 img 还是变形？检查这三处
这是最常被忽略的链路断裂点：容器比例稳了，内容却没管好。
必须同步确认以下三项：
-
img元素是否设置了width: 100%; height: 100%——object-fit需要这个“盒子”存在才能工作 - 父容器（即带
aspect-ratio的那个div）是否设置了overflow: hidden—— 否则object-fit: cover裁剪的部分会溢出 - 是否有全局样式干扰，比如
img { max-width: 100%; height: auto; }覆盖了你写的height: 100%
典型安全写法：
.card {
aspect-ratio: 16/9;
overflow: hidden;
}
.card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
真正复杂的地方不在 aspect-ratio 本身，而在于它和 object-fit、flex、grid、以及各种全局重置样式的协同边界——这些边界稍有错位，比例就又“失真”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
