现代浏览器支持 aspect-ratio: 16 / 9，但需设在父容器上且不能同时设置 width 和 height；旧版 Safari 不支持该属性。

现代浏览器直接用 aspect-ratio: 16 / 9，但必须设在父容器上、不能同时写死 width 和 height；旧版 Safari（padding-top 技巧。

为什么不能直接给 <video></video> 加 aspect-ratio

<video></video> 是替换元素，默认尺寸由 intrinsic size 决定，自身设 aspect-ratio 不参与布局计算。浏览器只认父容器的宽高比约束。常见错误是这么写：

video {
  width: 100%;
  aspect-ratio: 16 / 9; /* ❌ 大部分情况下无效 */
}

正确做法是把 aspect-ratio 放在外层 <div> 上，并让 <code><video></video> 填满它：

• 外层 <div class="video-wrapper"> 设 <code>aspect-ratio: 16 / 9 + width: 100%
• <video></video> 设 width: 100% + height: 100% + object-fit: cover
• 确保该 <div> 有明确宽度来源（如父级设了 <code>max-width 或 flex-basis）

  aspect-ratio 生效的前提条件

  这个属性不是“覆盖高度”，而是参与盒模型的推导逻辑——它需要至少一个方向尺寸可被计算出来。一旦你同时写了：

  立即学习“前端免费学习笔记（深入）”；

  div {
    width: 300px;
    height: 200px;
    aspect-ratio: 16 / 9; /* ❌ 完全被忽略 */
  }

  就等于告诉浏览器：“我就要这俩像素值”，比例失去作用。有效组合只有这些：

  • width: 100% + aspect-ratio: 16 / 9 → 高度自动算出
  • height: 200px + aspect-ratio: 16 / 9 → 宽度自动算出（≈266.67px）
  • width: clamp(300px, 80vw, 600px) + aspect-ratio: 16 / 9 → 依然生效，只要最终宽度不为 0

  特别注意：display: none 时宽度为 0，aspect-ratio 就无从触发重排。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载

  兼容旧版 Safari 的 padding-top fallback

  Safari 15.4 之前不支持 aspect-ratio，必须用经典 padding 技巧。核心是利用 padding-top 百分比基于父容器宽度计算这一特性：

  .video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%; /* 9 ÷ 16 = 0.5625 */
  }
  .video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  容易踩的坑：

  • 忘了设 position: relative → 子元素 absolute 脱标到 body
  • 父容器写了 height: 200px → padding-top 百分比失效或被压缩
  • 用了 padding-bottom 却没调换子元素定位顺序 → 视频可能被挤出可视区
  • 手算 16:9 比例写成 56% 或 56.3% → 实际应严格用 56.25%

  Grid 布局中控制每个视频项的宽高比

  如果用 display: grid 排多宫格视频（比如监控画面），别碰 grid-template-rows——它管轨道分配，不管子项比例。直接对每个网格项设 aspect-ratio 即可：

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  .video-item {
    aspect-ratio: 16 / 9;
    width: 100%;
  }

  关键点：

  • 只要 .video-item 是 grid 直接子元素（即 grid item），aspect-ratio 就能生效
  • 不需要额外 wrapper div，也不依赖 padding 技巧
  • 若某项内容为空或加载失败，建议加 min-height: 120px 防止塌陷

  真正容易被忽略的是：当父容器宽度来自 vmin、clamp() 或 flex 基础尺寸时，aspect-ratio 依然可靠——但它依赖的是最终渲染时的宽度值，而不是声明时的表达式。