直接给video或img写aspect-ratio无效，因其是替换元素，浏览器静默忽略；必须作用于块级/弹性/网格容器，并配width、不设height、配合object-fit才生效。

直接给 video 或 img 标签写 aspect-ratio 无效，必须作用于块级容器；不配 width 或冲突设 height 会导致容器塌陷或比例失效。

为什么 aspect-ratio 必须写在父容器上

img 和 video 是替换元素，默认 inline、无固有尺寸上下文，浏览器会静默忽略其 aspect-ratio 声明。DevTools 里甚至看不到该属性生效。真正起作用的是包裹它的 div 类容器，且需满足：

• display 为 block、flex 或 grid（不能是 inline 或 inline-block）
• 未被 position: absolute 或 float 脱离文档流
• 未设置 height（包括 height: auto，它也可能干扰推导）

aspect-ratio 不生效的常见组合错误

写对了属性名，但容器高度仍为 0 或拉满全屏？大概率是下面某条在作祟：

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

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

下载

• 漏了 width: 100% 或 max-width: 100% —— aspect-ratio 只推导高度，没宽度基准就无法计算
• 同时写了 height: 200px 或 min-height: 100px —— 浏览器直接丢弃 aspect-ratio，不报错也不警告
• 在 Flex 容器中，父项用了默认 align-items: stretch —— 子项被强行撑高，覆盖比例；加 align-self: center 可修复
• 容器本身嵌套在 flex: 1 的子项里，且父 flex 容器未设 min-width: 0 —— min-width: auto 锁死宽度，导致比例计算失败

移动端兼容性与降级方案怎么写才可靠

iOS Safari 15.4+、Chrome Android 100+ 才原生支持 aspect-ratio；真机测试 iOS 15.2 就会完全忽略该声明。不能只靠 @supports 包裹现代样式，降级必须结构级兼容：

• 用 @supports not (aspect-ratio: 1 / 1) 检测并包裹 fallback，这是唯一可靠方式
• padding-bottom 方案必须严格顺序：position: relative 父容器 → ::before 伪元素设 padding-bottom: 56.25% + height: 0 → 内容元素 position: absolute; top: 0; left: 0; width: 100%; height: 100%
• 别在同一选择器里混用 aspect-ratio 和 padding-bottom —— Safari 15.4+ 会优先应用 aspect-ratio，但若写法有误，可能连 fallback 都被破坏
• 分数写法更安全：aspect-ratio: 16 / 9，别用 1.777 或 56.25%，避免浮点精度误差

object-fit 和 aspect-ratio 怎么配合不出黑边或裁剪

aspect-ratio 只管容器“框”的比例，不管里面内容怎么铺。填不满或溢出，是 object-fit 没配对：

• object-fit: cover：无黑边，但可能裁剪边缘；建议加 object-position: center 防人脸偏移
• object-fit: contain：完整显示，但必有黑边；适合教学类视频、图表等不允许裁剪的场景
• object-fit: fill：强制拉满，必变形 —— 除非明确要压扁/拉长，否则避免使用
• video 标签上绝对不要带 HTML width 和 height 属性（如 width="640"），它们会覆盖 CSS 计算

最容易被忽略的是：当容器同时设了 min-width 和 aspect-ratio，浏览器会优先满足最小宽度，导致高度被强行拉高、比例崩坏——这不是 bug，是规范行为。比例约束只在尺寸可自由伸缩时生效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！