如何用CSS ::before创建自适应长宽比容器_利用padding-top百分比技巧-css教程-PHP中文网

能做出可靠自适应长宽比容器，需父容器有明确宽度、不设height、内容用position:absolute填满；::before的padding-top百分比按父宽计算，如16:9为56.25%。

如何用css ::before创建自适应长宽比容器_利用padding-top百分比技巧

直接用 ::before + padding-top 百分比能做出可靠自适应长宽比容器，但必须满足三个硬性条件：父容器有明确宽度、不设 height、内容用 position: absolute 填满；漏掉任一，容器就塌或错位。

为什么 ::before 的 padding-top 能撑高容器

因为 ::before 是伪元素，只要设了 display: block 或 table，它的 padding-top 百分比就按父容器宽度计算——和普通元素一致。16:9 就写 padding-top: 56.25%（即 9 / 16 * 100），4:3 就写 padding-top: 75%。它不依赖子元素存在，也不改动 HTML 结构，纯靠盒模型“占位”推高容器高度。

常见错误现象：::before 完全没效果、高度为 0、父容器被撑得过高或内容溢出。

父容器未设 width（比如只写了 max-width 但没配 width: 100%）→ 百分比失去参照，padding-top 算成 0
父容器写了 height: auto 或具体值 → 直接压制伪元素撑高行为
::before 没加 display: block → 默认是 inline，padding-top 不参与盒模型高度计算

标准写法里三个角色缺一不可

这是经过 Safari 15.4+、Chrome 120、Firefox 115 和安卓 WebView 多端验证的最小可行组合：

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

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

下载

.aspect-16x9 {
  position: relative;
  width: 100%;
}
.aspect-16x9::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.aspect-16x9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

关键点说明：

position: relative 必须加在父容器上，否则 absolute 子元素会向上找定位上下文，可能脱离预期范围
::before 只负责撑高，不设 width、height、margin，也不用 float（和 position: absolute 冲突）
真实内容（如 <img>、<video></video>）必须用 position: absolute 填满，不能靠 flex 居中或 margin: auto，否则在旧 WebView 中会失效