如何在CSS中利用变量实现自适应宽高比_结合aspect-ratio与变量-css教程-PHP中文网

现代浏览器原生支持 aspect-ratio，可配合 css 自定义变量动态设置宽高比，如 aspect-ratio: var(--ratio, 16/9)；但不支持 calc()、字符串或带单位的值。

如何在css中利用变量实现自适应宽高比_结合aspect-ratio与变量

用 `aspect-ratio` 配合 CSS 自定义变量直接生效

现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已原生支持 aspect-ratio，它能直接声明宽高比，无需 hack。配合 CSS 变量，就能动态控制比例，比如统一管理卡片、封面图、视频容器的宽高关系。

关键点是：变量必须在 aspect-ratio 值中参与计算，而该属性**不接受 calc() 外部包裹**，只能用变量直接代入：

aspect-ratio: var(--ratio, 16/9); ✅ 合法，浏览器会解析为数值比
aspect-ratio: calc(var(--ratio)); ❌ 无效，calc() 在这里不被允许
--ratio: "16 / 9"; ❌ 字符串无效，必须是纯数值比（如 16/9 或 1.777）

示例：

:root {
  --card-ratio: 4/3;
}
.card {
  aspect-ratio: var(--card-ratio);
  width: 100%;
  max-width: 300px;
}

为什么不能用 `calc()` 动态算 `aspect-ratio`

很多人尝试写 aspect-ratio: calc(var(--w) / var(--h));，但这是语法错误——aspect-ratio 的值类型是 <ratio></ratio>，不是数学表达式，也不支持运行时计算。CSS 变量在这里只是文本替换，最终必须是像 16/9 这样的合法比值。

常见误用场景：

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

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

下载

把 --w 设为 16px、--h 设为 9px，再除 —— 单位无法相除，报错
设 --ratio: 16/9 但漏掉空格或加引号 —— 解析失败，回退到浏览器默认（通常是 auto）
在旧版 Safari（

兼容性 fallback 必须手动写，不能靠变量自动降级

aspect-ratio 没有“优雅降级”机制。变量本身不触发兼容逻辑，你得显式提供后备方案。最稳妥的是用 padding-bottom + absolute 容器的经典 hack，并通过 @supports 隔离：

.media-container {
  position: relative;
  width: 100%;
}
<p>.media-container::before {
content: "";
display: block;
padding-bottom: calc(100% / (16/9)); /<em> 手动写死，变量进不来 </em>/
}</p><p>.media-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}</p><p>@supports (aspect-ratio: 16/9) {
.media-container::before { display: none; }
.media-container { aspect-ratio: var(--ratio, 16/9); }
}</p>

注意：padding-bottom 里的计算仍不能用变量，所以 fallback 部分和主逻辑是割裂的——变量只服务于现代路径。