当使用百分比设置图片尺寸时，窗口大小变化会导致缩放镜头与原图位置偏移；只需监听 `resize` 事件并动态更新缩放计算参数，即可实时同步镜头定位与背景图尺寸。
在基于 W3Schools 图片缩放教程实现的交互式放大功能中，若将 的宽高由固定像素（如 width="300"）改为相对单位（如 width="50%"），图像会随视口自适应缩放——这虽提升了响应式体验，却引入了一个关键缺陷：窗口尺寸改变后，放大镜（lens）的位置和背景图的缩放比例不再匹配原始图像的实际渲染尺寸，导致镜头“悬浮”或“错位”，无法准确映射到目标区域。
根本原因在于：imageZoom() 初始化时读取的 img.width、img.height、lens.offsetWidth 和 result.offsetHeight 等 DOM 尺寸值均为静态快照，未随 CSS 布局重排而更新。浏览器缩放或窗口调整后，这些值已失效，但 JavaScript 并未主动刷新。
✅ 解决方案是：为窗口添加 resize 事件监听器，并在回调中重新计算核心缩放参数。具体步骤如下：
-
在 imageZoom() 主函数末尾注册监听：
window.addEventListener("resize", updateVars); -
定义 updateVars() 函数，动态重算缩放比与背景尺寸：
function updateVars() { // 重新获取当前渲染尺寸（关键！） const imgRect = img.getBoundingClientRect(); const lensRect = lens.getBoundingClientRect(); const resultRect = result.getBoundingClientRect();
// 计算 lens 与结果容器的缩放比例（横向/纵向） const cx = resultRect.width / lensRect.width; const cy = resultRect.height / lensRect.height;
// 同步背景图尺寸：按原始图片分辨率 × 缩放比 result.style.backgroundSize = (img.naturalWidth cx) + "px " + (img.naturalHeight cy) + "px"; }
⚠️ 注意事项：
- 使用 `img.naturalWidth`/`naturalHeight` 替代 `img.width`/`height`，确保获取原始图片固有分辨率，避免被 CSS 或 HTML 属性干扰；
- 推荐用 `getBoundingClientRect()` 获取实时布局尺寸，比 `offsetWidth` 更可靠（尤其在 Flex/Grid 布局中）；
- 若页面存在频繁 resize（如拖拽浏览器边框），可添加防抖（debounce）优化性能：
```javascript
let resizeTimer;
window.addEventListener("resize", () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(updateVars, 100);
});通过以上改造，imageZoom() 不再是“一次性初始化”的静态函数，而是具备响应式感知能力的动态模块。每次窗口尺寸变化后，镜头定位、背景位移及缩放比例均自动对齐最新渲染状态，彻底解决刷新前错位问题，真正实现无缝响应式图片缩放体验。
