直接用aspect-ratio能稳定媒体盒子尺寸，但需满足前提：不能同时写死width和height；必须设在父容器（如div）而非video标签上，并配合width:100%或max-width及object-fit才能生效。

直接用 aspect-ratio 就能稳定媒体盒子尺寸，但前提是别同时写死 width 和 height —— 否则它根本不会生效。

为什么 aspect-ratio 写了却没反应

最常见的情况是：你给元素同时设了 width: 300px 和 height: 200px，这时候浏览器按固定像素渲染，aspect-ratio 被完全忽略。它不是“覆盖规则”，而是参与盒模型计算的推导逻辑，必须满足“至少一个方向尺寸可推导”这个前提：

• width: 100%; aspect-ratio: 16 / 9 → 高度自动算出
• height: 200px; aspect-ratio: 4 / 3 → 宽度自动算出（约 266.67px）
• width: 100%; height: 100% → aspect-ratio 彻底失效

视频容器必须把 aspect-ratio 设在父容器上

别写在 <video></video> 标签本身上——它是替换元素，默认受父容器约束，自身设 aspect-ratio 没效果。正确做法是：

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

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

下载

• 外层 <div class="video-item"> 设 <code>aspect-ratio: 16 / 9
• 内部 <video></video> 设 width: 100%; height: 100%; object-fit: cover
• 确保父容器有明确宽度来源（如 width: 100% 或 max-width: 600px）

Grid 布局中网格项的宽高比怎么控制

不用碰 grid-template-rows，那玩意儿管的是轨道分配，不参与子项内容比例。只要网格项是 display: grid 的直接子元素（即 grid item），直接设 aspect-ratio 就行：

• grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) 控制列数
• 每个 .video-item 设 aspect-ratio: 16 / 9，高度自动适配
• 旧版 Safari（aspect-ratio，需 fallback：用 padding-top: 56.25% + position: relative 撑高

object-fit 选 cover 还是 contain 取决于内容优先级

这不是技术对错问题，而是业务判断：

• object-fit: cover：填满无黑边，但可能裁剪边缘——适合短视频流、封面预览
• object-fit: contain：完整显示，但留空——适合教学录屏、演示动画
• 若担心小屏裁太多文字，可加 min-height: 120px 配合 cover，防止过度压缩

真正容易被忽略的是：当父容器宽度由 vmin、clamp() 或 flex 基础尺寸动态决定时，aspect-ratio 依然有效，但它依赖的是最终计算出的宽度值；一旦宽度变成 0 或未触发重排（比如 display: none 时），比例也就无从谈起。