如何让图片随浏览器字体大小自动按比例缩放？

当用户修改浏览器字体大小设置时，1rem不再等于默认的16px。比如Chrome的「超大」模式下，1rem会变成24px，也就是默认字体大小的150%。我的布局完全基于rem，希望所有<img>元素能跟着按比例放大（比如同样放大150%）。

用JS能算出缩放因子：

const k = parseFloat(getComputedStyle(document.documentElement).fontSize) / 16;

再把这个值套到每个<img>上，但用户在页面加载后改字体大小的话，布局会崩。想问有没有纯CSS或者属性的方式，让浏览器自动缩放<img>？

更新：如果有浏览器字体大小变化的事件，我可以通过它设置CSS变量实现缩放：

img.auto-scale
{
    zoom: var(--font-size-factor);
}

纯CSS自动缩放（完全无需JS） #

直接利用rem单位的特性就行——把图片的宽高用rem定义，别用固定px。

比如原本你写：

img {
  width: 200px;
  height: 150px;
}

改成：

img {
  width: 12.5rem; /* 200 ÷ 16 = 12.5 */
  height: 9.375rem; /* 150 ÷ 16 = 9.375 */
}

这样浏览器字体大小调整时，rem的基准值变了，图片宽高会自动按比例缩放，不管是页面加载前还是加载后改字体，浏览器都会自动处理，完全不用JS插手。

要是图片用的是max-width: 100%这类响应式设置，只要父容器的尺寸是rem定义的，图片也会跟着父容器自动缩放，不用额外配置。

JS+CSS变量方案（针对无法用rem定义图片尺寸的场景） #

如果图片尺寸没法直接用rem写（比如动态生成的尺寸），可以监听浏览器的resize事件（字体大小变化会触发这个事件），实时更新CSS变量：

先写CSS：

img.auto-scale {
  zoom: var(--font-size-factor, 1);
}

再写JS逻辑：

function updateScaleFactor() {
  const baseSize = 16;
  const currentSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
  document.documentElement.style.setProperty('--font-size-factor', currentSize / baseSize);
}

// 页面加载时先初始化一次
updateScaleFactor();
// 监听窗口 resize 事件，实时更新
window.addEventListener('resize', updateScaleFactor);

这样用户在页面加载后改字体大小，resize事件会触发，缩放因子实时更新，图片会自动调整，不会搞乱布局。

内容的提问来源于stack exchange，提问作者Shtole