放大镜效果必须用 position: relative 包裹图片容器，因为绝对定位的放大镜需相对于已定位祖先定位；若父容器未设该属性，放大镜会错位到 body；且应设在容器而非 img 上，因 img 是替换元素。
放大镜效果为什么必须用 position: relative 包裹图片
因为放大镜（通常是另一个 <div> 或伪元素）需要基于图片做精准的偏移定位，而 position: absolute 的元素会相对于最近的「已定位祖先」计算坐标。如果图片父容器没设 position: relative，它就会一路往上找，甚至跑到 <body> 去定位，导致放大镜飘走。
常见错误现象：transform: scale() 放大后位置错乱、鼠标悬停时放大镜不跟手、多张图共用同一套 CSS 时只有一张生效。
- 图片容器（比如
<div class="gallery-item">）必须加position: relative - 不要只给图片本身设
position: relative——<img>是替换元素，设了也没用，定位锚点得落在它的父块级容器上 - 若用
display: grid或flex布局画廊，确保每个子项是独立的定位上下文，避免overflow: hidden裁掉放大镜
如何让放大镜始终对准鼠标指针（不是图片左上角）
关键在 JS 计算偏移时，要用 getBoundingClientRect() 拿到图片容器的真实视口坐标，再减去鼠标 clientX/Y，而不是直接用 event.offsetX/Y——后者在缩放或有 padding/border 的容器里误差很大。
使用场景：响应式画廊、图片带内边距或圆角、容器有 transform 缩放。
立即学习“前端免费学习笔记（深入）”；
- 监听
mousemove事件时，目标元素必须是图片容器（.gallery-item），不是<img> - 放大镜的
left和top应该是：mouseX - rect.left - lensWidth/2，注意减半宽高居中 - 加个
pointer-events: none到放大镜元素上，避免遮挡鼠标事件
background-size: cover 和 contain 对放大区域的影响
放大镜本质是截取原图一部分再放大显示，如果图片容器用了 background-image + background-size: cover，你看到的只是裁剪后的视图，JS 里读不到原始尺寸，会导致放大区域偏移或拉伸失真。
性能影响：用 <img> 标签 + object-fit 更可控；用背景图则需额外维护 background-position 与鼠标坐标的映射关系。
- 推荐用
<img src="...">，配合object-fit: cover和object-position控制构图 - 如果非用背景图不可，得在 JS 中手动记录
background-size计算出的缩放比，并校正坐标 -
background-size: 100% 100%最省事，但会拉伸变形，慎用
移动端 touch 事件下放大镜偏移失效怎么办
因为 touchmove 的 touches[0] 坐标是相对于视口的，但页面可能滚动，而 getBoundingClientRect() 返回的是当前帧的静态位置，两者不同步就导致放大镜“滞后”或“跳变”。
兼容性影响：iOS Safari 对 touch-action: none 处理较严格，不加会导致页面被误判为可拖拽而触发回弹。
- 监听
touchmove时，用event.touches[0].clientX替代pageX - 给放大镜容器加
touch-action: none，阻止浏览器默认手势干扰 - 避免在
scroll过程中频繁重算——可节流，或改用passive: true监听
最易被忽略的一点：很多方案只处理了鼠标，但没关掉移动端的 hover 伪类残留效果，结果手指划过时放大镜一闪而过。记得用 @media (hover: hover) 做隔离。
