aspect-ratio没效果最常见原因是容器缺乏可推导宽度或被height硬覆盖；它仅在至少一个方向为auto且浏览器支持（chrome 88+/safari 15.4+）时生效，旧版需padding-top降级。
aspect-ratio 能直接实现，但多数情况下它会静默失效——不是语法错，而是缺了宽度基准或撞上浏览器兼容性红线。
为什么写了 aspect-ratio: 16 / 9 却没效果
最常踩的坑是：容器没有可计算的宽度，或者被 height 硬覆盖。
-
aspect-ratio不会自己“猜”宽度，必须依赖父容器提供明确宽度（比如width: 100%、flex: 1、max-width: 400px） - 写了
height: 200px或min-height: 300px？它会直接忽略aspect-ratio -
<img>或<video></video>默认是display: inline，得加display: block才生效 - Chrome 88+ / Firefox 89+ / Safari 15.4+ 支持；Safari 15.3 及更早、IE 完全无视该属性
用 padding-top 降级时内容总被顶出框外
这是因未隔离 padding 产生的“伪高度”和内容流之间的冲突。
- 父容器必须设
position: relative，且height: 0—— 否则padding-bottom会叠加在内容高度上 - 子内容区域要用
position: absolute，并设top: 0; left: 0; width: 100%; height: 100% - 别给子元素写
height: 100%，它对 padding 生成的高度不生效，反而导致溢出 - 16:9 对应
padding-bottom: 56.25%，正方形用padding-bottom: 100%，数值必须基于宽度计算
如何让等比矩形真正响应式地撑满容器宽度
核心是切断内容高度对布局的干扰，只让宽度驱动比例推导。
- 显式控制宽度来源：
width: 100%（需父容器有宽）、flex: 1（flex item）、grid-column: span 2（grid item） -
aspect-ratio推荐写成分数形式：aspect-ratio: 16 / 9比1.777更可靠，避免浮点误差 - 如果内容是图片，子元素要加
width: 100%; height: 100%; object-fit: cover，否则默认拉伸变形 - 旧方案中，
padding-bottom必须配合position: relative+height: 0，顺序不能颠倒
要不要用 vmin 或 vw 替代
可以，但适用场景有限——它响应的是视口尺寸，不是容器尺寸。
-
width: 50vmin; height: 50vmin能做正方形，但无法适配嵌套容器（比如卡片内的媒体框） - 当需要“随父容器缩放”而非“随屏幕缩放”时，
vmin会脱离上下文，失去响应式语义 - 它绕过了
aspect-ratio的语义优势，也规避不了padding方案里绝对定位的复杂度
aspect-ratio 是首选，但必须检查父容器宽度是否真实存在；降级方案不是“多写几行”，而是把 padding-bottom 和 position: absolute 当作一个原子操作来写——漏掉任一环，矩形就塌。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
