不能直接用 img + overflow:auto 实现局部放大，因为 img 是替换元素，浏览器忽略其 overflow 属性；必须用双图结构：外层 div 容器设 overflow:auto 提供滚动条，内层 div 以高清图为 background-image，通过动态计算 background-position 偏移实现鼠标跟随的精准局部放大。
纯 CSS 的 transform: scale() 或 max-width: 100% 都不能满足「响应式图片 + 滑动条 + 局部放大」这个组合需求——前者不支持局部裁剪和坐标绑定，后者只控制整体缩放。真要实现，必须用双图结构 + background-position 动态偏移 + 容器 overflow: auto 暴露滚动条，且所有尺寸计算得基于实际加载后的图片自然尺寸。
为什么不能直接用 img + overflow:auto 实现局部放大
浏览器对 <img> 元素的 overflow 属性完全忽略，无论设成 auto 还是 scroll，它都不会出现滚动条。你看到的“可拖动”，其实是把图片塞进一个带 overflow: auto 的 <div>，再靠 JS 改变 scrollLeft/scrollTop，但这无法精准对应鼠标位置，也不支持放大倍数独立控制。
-
<img>是替换元素，其渲染行为绕过常规盒模型，overflow对它无效 - 手动
scrollLeft移动的是整个图片，不是“镜中视口”，无法实现“鼠标指哪、放大多大、居中显示”的语义 - 移动端 touchmove 默认触发页面滚动，不拦截会和容器滚动冲突
正确结构：div 背景图 + 可滚动容器 + 动态 background-position
核心是放弃在 <img> 上做文章，改用 <div> 承载高清图作为背景，再套一层带 overflow: auto 的外容器。滑动条来自外容器，局部放大逻辑由 background-position 偏移驱动。
- 外层容器：
<div class="zoom-container" style="width: 400px; height: 300px; overflow: auto;">—— 尺寸固定，提供滚动条 - 内层图层：
<div class="zoom-image" style="width: 1200px; height: 900px; background-image: url(large.jpg); background-size: 100% 100%;">—— 实际尺寸是高清图 naturalWidth/naturalHeight - 放大倍数 =
largeWidth / containerWidth（比如 1200 / 400 = 3），则鼠标在容器内 X 坐标对应背景图应偏移-X * 3 - 必须加边界限制：
background-position: max(0, min(largeWidth - containerWidth, -x * scale)) px max(0, min(largeHeight - containerHeight, -y * scale)) px
监听坐标时别踩 offsetX/offsetY 的兼容性坑
e.offsetX 和 e.offsetY 在 Firefox 和旧版 Safari 中行为不一致，且 IE 完全不支持。直接用它算出来的偏移值在部分设备上会偏移一截，导致“鼠标点的位置”和“镜中显示的位置”错位。
立即学习“前端免费学习笔记（深入）”；
- 稳妥做法是用
getBoundingClientRect()手算：const rect = container.getBoundingClientRect(); const x = e.clientX - rect.left; - 移动端必须用
touches[0].clientX，不能用changedTouches[0]（可能为空） - 首次绑定事件前，务必确认高清图已加载完成：
if (img.complete && img.naturalWidth) { initZoom(); } else { img.addEventListener('load', initZoom); } - 如果用
URL.createObjectURL()加本地文件，记得revokeObjectURL()避免内存泄漏
移动端滚动条卡顿与 touch-action 冲突
iOS Safari 和 Android Chrome 默认把 touchmove 当作页面滚动意图，即使你在容器上写了 touch-action: none，若未在事件回调第一行调用 e.preventDefault()，滚动条仍会抢事件、跳转或卡顿。
- 必须给容器加
style="touch-action: none;" - touchmove 回调开头立刻写
e.preventDefault();，不能只在touchstart绑一次 - 滚动条方向需匹配交互：水平拖动看细节（如织物纹理）就设
overflow-x: auto; overflow-y: hidden;；垂直查看长图（如古籍扫描件）则反向 - 滚动条样式可定制：
.zoom-container::-webkit-scrollbar { width: 8px; }，但 Firefox 需用scrollbar-width属性
最容易被忽略的是高清图加载时机——很多代码等 img.onload 就初始化，但缓存命中时该事件根本不会触发，naturalWidth 还是 0，background-position 算出来就是 NaN，结果容器一片空白。必须同时检查 complete 和 naturalWidth > 0 才能安全开始计算。
