### [CSS 变量驱动图片缩放：变量本身不响应](https://www.huociguo.com/article/1701)

**Published:** 2026-10-02T04:30:10

**Author:** 米了

**Excerpt:** 把缩放系数写进 CSS 变量，图片就会随窗口变化，这个期待不成立。变量的值是静态的，媒体查询不改变时，变量不会…

把缩放系数写进 CSS 变量，图片就会随窗口变化，这个期待不成立。变量的值是静态的，媒体查询不改变时，变量不会自己更新。

![显示器上的代码行](https://api.huociguo.com/wp-content/uploads/2026/10/pexels-photo-6424583.jpeg)

变量只负责存值，不负责感知环境

## 问题写法

```
:root { --scale: 1; }
img { transform: scale(var(--scale)); }
```

窗口变窄时变量仍是 1，图片不会缩。

## 修正一：媒体查询更新变量

```
:root { --scale: 1; }
@media (max-width: 768px) { :root { --scale: 0.85; } }
@media (max-width: 480px) { :root { --scale: 0.7; } }
```

断点集中在一处改变量，引用处不用动。调整档位时只改这一块。

## 修正二：直接用视口单位

```
img { width: min(100%, 720px); height: auto; }
```

单纯随窗口缩放时，视口单位与 min、clamp 配合即可，不需要变量参与。

## 修正三：脚本驱动的场景

```
let raf = 0;
function update() {
  document.documentElement.style.setProperty('--scale', String(calc()));
  raf = 0;
}
addEventListener('scroll', () => {
  if (!raf) raf = requestAnimationFrame(update);
});
```

缩放要跟随滚动进度或手势时，由脚本更新变量。滚动监听要做帧合并，避免高频触发。

## 注意点

-   变量更新作用在根元素上，后代自动继承。
-   缩放会改变命中区域，交互元素注意 transform-origin。
-   图片缩放只是显示层变化，原始文件体积不受影响。

**Tags:** CSS变量, transform缩放, 响应式图片, 响应式布局, 媒体查询

**Categories:** HTML5

---