CSS 变量驱动图片缩放：变量本身不响应

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

问题写法

: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。
• 图片缩放只是显示层变化，原始文件体积不受影响。