怎么利用CSS变量实现动态宽高比自适应容器-css教程-PHP中文网

aspect-ratio不支持css变量动态计算，仅接受无单位字面量分数（如16/9）；可靠方案是padding-top+calc()配合css变量，利用父宽百分比实现动态长宽比，并用@supports渐进增强。

怎么利用css变量实现动态宽高比自适应容器

aspect-ratio 不支持 CSS 变量动态计算

直接写 aspect-ratio: calc(var(--w) / var(--h)) 或 aspect-ratio: var(--ratio)（其中 --ratio 是 JS 动态设置的）——浏览器会静默忽略整条规则，容器可能塌陷或按默认尺寸渲染。原因很明确：CSS 的 aspect-ratio 属性只接受无单位、无空格、无引号的字面量分数（如 16/9），且该值必须在样式表解析阶段就确定，不参与运行时计算。

即使你用 :root { --ratio: 16/9; } 再写 aspect-ratio: var(--ratio);，也仅在 Chrome 88+、Firefox 89+、Safari 15.4+ 中有效；Safari ≤ 15.3 完全不识别，旧版 Edge 更不用提。

真正能用变量动态算比值的方案：padding-top + calc()

这是目前唯一兼容所有现代浏览器、支持变量参与运算、且稳定可控的方式。核心是利用「子元素 padding 百分比基于父容器宽度计算」这一 CSS 原生机制。

:root { --aspect-w: 16; --aspect-h: 9; } —— 宽高变量存为纯数字，便于后续除法运算
容器需设 position: relative; width: 100%;
关键占位层写：padding-top: calc(var(--aspect-h) / var(--aspect-w) * 100%); height: 0;
内容层用 position: absolute; top: 0; left: 0; width: 100%; height: 100%; 填满
别漏 box-sizing: border-box，否则边框会让实际尺寸超标

@supports 渐进增强：现代用 aspect-ratio，旧版回落 padding

你可以用 @supports (aspect-ratio: 16/9) 包裹原生方案，同时把 padding 方案作为 fallback：

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

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

下载

.aspect-container {
  width: 100%;
}
@supports (aspect-ratio: 16/9) {
  .aspect-container {
    aspect-ratio: 16/9;
  }
}
@supports not (aspect-ratio: 16/9) {
  .aspect-container::before {
    content: "";
    display: block;
    padding-top: calc(var(--aspect-h) / var(--aspect-w) * 100%);
  }
  .aspect-container > * {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
  }
}

注意：不要在同一个选择器里混写 aspect-ratio 和 padding-top，浏览器可能按不可预测顺序应用，导致布局抖动。

容易被忽略的继承与作用域陷阱

CSS 变量不是“全局常量”，它的值取决于当前元素是否能沿继承链读到定义。常见失效场景：

在子元素里写 padding-top: calc(var(--aspect-h) / var(--aspect-w) * 100%)，但 --aspect-w 只定义在某个中间祖先上，而该祖先写了 --aspect-w: initial; → 继承中断，计算结果为 NaN，整个声明失效
--aspect-w: 16px（带单位）→ calc(var(--aspect-h) / var(--aspect-w) * 100%) 因单位不匹配报错，降级为无效值
容器本身没设 width（比如 Flex 子项未设 flex-basis 或父容器未给定宽度）→ padding-top 百分比失去计算基准，结果为 0