aspect-ratio写了没效果是因为浏览器未参与计算，需同时满足五个硬性条件：显式设置width/max-width；禁止任何height/min-height声明；元素display必须为block或inline-block；父容器不能是align-items: stretch的flex容器；不可直接用于video/img等替换元素，须用div包裹。
aspect-ratio写了没效果？先检查这五个硬性条件
不是属性失效，而是浏览器压根没让它参与计算。最常被忽略的是：height、min-height哪怕只写了height: auto或min-height: 0，都会直接屏蔽aspect-ratio——高度来源只能有一个，height永远优先。
其他关键前提包括：
-
width或max-width必须显式设置（如width: 100%、width: 300px），否则没有“1份宽”作基准 - 元素不能是
display: inline（比如默认<img alt="如何在CSS3中使用aspect-ratio实现响应式等比缩放" >），得加display: block或inline-block - 父容器不能是
display: flex且align-items: stretch（默认值），会强制拉伸子项高度 - 替换元素（
<video></video>、<canvas></canvas>、<iframe></iframe>）上直接写aspect-ratio无效，必须用<div>包裹 <h3>替换元素（video/img）怎么用aspect-ratio才生效</h3> <p>直接写在<code><video></video>或<img alt="如何在CSS3中使用aspect-ratio实现响应式等比缩放" >标签上，99%情况会静默失败。正确做法是套一层<div>作为 wrapper，并满足以下组合： <ul> <li>wrapper 设<code>display: block（避免 Safari 15.4–16.3 在 flex 容器中的 bug） - wrapper 写
aspect-ratio: 16/9+width: 100%（或具体值） - 移除
<video></video>上的width和height属性（如width="640"） - 子元素（
<video></video>或<img alt="如何在CSS3中使用aspect-ratio实现响应式等比缩放" >）设width: 100%、height: 100%、object-fit: cover - 加
max-width控制上限，否则大屏下可能无限拉宽
示例：
立即学习“前端免费学习笔记（深入）”；
<div style="aspect-ratio: 16/9; width: 100%; max-width: 800px; display: block;"> <video width="100%" height="100%" object-fit="cover"></video> </div>
和object-fit协同时容易踩的坑
object-fit本身不控制容器尺寸，它只决定内容如何填满已有盒子。如果盒子尺寸没被aspect-ratio稳住，object-fit: cover就会在扭曲的框里裁图，结果还是变形。
常见错误链：
- flex 容器中图片默认
flex-shrink: 1→ 主轴方向被压缩 → 实际渲染宽度远小于原始尺寸 - 此时
object-fit只能在窄框里裁，视觉上仍是拉伸或错位 - 必须同步设
flex-shrink: 0或flex: 0 0 auto，并确保 wrapper 有明确宽度 - 替换元素还默认
min-width: auto，多层嵌套时需在 wrapper 或图片自身加min-width: 0
Bootstrap 或 Grid 布局里怎么让 aspect-ratio 正常工作
Bootstrap 的col类（尤其无数字后缀的col）默认flex-basis: 0，容易导致宽度坍缩，aspect-ratio失去基准。必须用带尺寸的类，比如col-6、w-50，或直接加style="width: 50%"。
Grid 场景下：
-
aspect-ratio必须写在每个grid-item上，而不是grid-container - 每个 item 需是块级元素（
display: block），避免被 grid 自动设为inline - 若用
grid-template-rows: 1fr，记得配minmax(0, 1fr)防止内容最小尺寸干扰比例感
真正麻烦的地方不在语法，而在混合场景：比如一个用了aspect-ratio的卡片，又嵌在 flex 容器里，还要求响应式换行——这时必须逐层检查 display 类型、父容器约束、以及 Safari 特定版本的静默降级行为。
