如何获取父元素高度存入CSS变量实现16:9视频尺寸自适应

纯CSS实现方案 #

无需手动传入父元素高度到CSS变量，也不需要额外嵌套冗余标签，完全兼容现有grid布局的居中逻辑，按父元素的高度规则分两种场景实现，效果和你提供的JS代码完全一致：

场景1：父元素高度由布局确定（grid/flex轨道分配、显式设置height属性）

不需要额外属性，直接靠原生CSS约束即可自动适配：

#video-player {
  /* 宽度上限为父元素全宽 */
  width: 100%;
  /* 强制16:9宽高比 */
  aspect-ratio: 16 / 9;
  /* 高度上限为父元素高度的2/3 */
  max-height: 66.67%;
  /* 保留原有grid居中配置即可 */
  align-self: center;
  justify-self: center;
  border: none;
}

实现逻辑：当父元素宽度足够，按100%宽度算出的16:9高度超过父高2/3时，max-height会触发高度限制，aspect-ratio属性会自动按比例同步收缩宽度，全程不会出现拉伸变形，浏览器原生计算的性能远高于JS监听resize的方案。

场景2：父元素高度由内容自适应撑开

如果父元素没有被布局分配固定高度、高度完全由内部内容决定，百分比单位的max-height会失效，此时用CSS容器查询单位可以直接读取父元素的实际渲染高度，仅需给父元素加一行容器声明：

/* 父元素新增容器属性，不影响其他原有样式 */
#parent {
  container-type: size;
}

#video-player {
  /* 宽度取「父元素全宽」和「父高2/3对应16:9宽度」的最小值 */
  width: min(100%, calc((cqh * 2 / 3) * 16 / 9));
  aspect-ratio: 16 / 9;
  align-self: center;
  justify-self: center;
  border: none;
}

其中cqh是原生容器查询单位，1cqh等于父容器实际渲染高度的1%，不需要JS介入即可实时响应父元素的尺寸变化，窗口缩放、内容变动导致的布局调整都会自动触发尺寸重算，响应速度比防抖JS更快。

常见误区说明 #

你之前尝试的padding-top比例hack是aspect-ratio属性普及前的兼容方案，需要额外嵌套定位容器，现在现代浏览器全量支持aspect-ratio后，完全不需要冗余标签，也不会和grid、flex的对齐逻辑产生冲突。
你最初思路里卡壳的「获取父元素高度存入CSS变量」是伪需求：

• 确定高度的父元素可以直接通过百分比单位读取对应尺寸
• 自适应高度的父元素可以通过容器查询单位直接读取渲染尺寸
• aspect-ratio原生支持在宽高任意维度被约束时，自动按比例调整另一维度尺寸，不需要手动写calc做宽高换算。

内容的提问来源于stack exchange，提问作者cameralibre