如何根据页面缩放比例自动调整img标签图片尺寸

浏览器默认触发Ctrl +/Ctrl -整页缩放时，会自动缩放所有页面元素，如果出现图片尺寸不同步、错位、模糊的问题，可以通过以下两类方案实现稳定适配：

方案1：纯CSS相对单位适配（推荐，无额外JS开销） #

不要给图片设置固定px单位的宽高，改用随页面缩放自动换算的相对单位即可实现自动同步，是兼容性最好、性能最高的方案：

• 通用配置代码：

/* 全局图片默认配置 */
img {
  /* 可根据业务选择rem、vw等相对单位，示例用rem作为尺寸单位 */
  width: 18rem;
  height: auto;
  max-width: 100%;
  /* 优化缩放时的渲染效果，减少模糊、锯齿 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

原理：浏览器触发整页缩放时，会自动调整根元素字号、视口计算值，rem、vw/vh这类相对单位的实际渲染尺寸会同步按缩放比例换算，不需要额外介入逻辑。如果原有业务已经用px写死了图片尺寸，可以统一将px按基准（默认1rem=16px）换算为rem单位即可。

方案2：JS精准监听缩放比例调整（适合需要精确控制尺寸的场景） #

如果业务场景要求严格匹配缩放倍率，或者原有逻辑无法改造为相对单位，可以通过监听视口变化+读取设备像素比的方式动态调整图片尺寸，可覆盖所有缩放触发路径（快捷键、浏览器菜单、触控板手势等）：

• 实现代码：

// 页面首次加载时，记录所有图片的无缩放基准尺寸
const imgBaseSizeMap = new WeakMap()
const baseDpr = window.devicePixelRatio
document.querySelectorAll('img').forEach(img => {
  const rect = img.getBoundingClientRect()
  imgBaseSizeMap.set(img, {
    width: rect.width / baseDpr,
    height: rect.height / baseDpr
  })
})

// 监听视口变化触发的缩放
window.addEventListener('resize', () => {
  const currentScale = window.devicePixelRatio / baseDpr
  document.querySelectorAll('img').forEach(img => {
    const baseSize = imgBaseSizeMap.get(img)
    if (!baseSize) return
    img.style.width = `${baseSize.width * currentScale}px`
    img.style.height = `${baseSize.height * currentScale}px`
  })
})

注意：不要通过监听Ctrl+/-键盘事件判断缩放操作，该方式无法覆盖用户通过菜单、手势触发缩放的场景，可靠性极低。

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