纯CSS无法实现点击后局部放大预览，因其无法读取点击坐标、动态映射background-position；radio hack仅支持静态全图预览，不支持鼠标定位的镜片式放大；JS必须完成容器偏移获取、相对坐标换算和缩放比反向映射三步计算。
纯 CSS 无法实现“点击后在大图中局部放大预览”——因为局部放大要求实时锚定鼠标点击坐标，并动态映射到大图的 background-position，而 CSS 没有机制读取或响应点击位置。
为什么 :checked + radio hack 只能做全图预览，不能做局部放大
radio hack 利用 :checked 控制显隐，但它的定位是静态的：大图容器位置、尺寸、background-position 都需提前写死。一旦用户点击图片任意位置，你无法通过 CSS 知道 x=127px、y=83px 对应大图哪一块。它适合缩略图 → 全图弹窗这类单点触发场景，不适用于镜片式跟随放大。
- 所有依赖
:hover或:active的方案，在点击松开后立即失效，无法维持状态 -
:focus-within无法获取坐标，且移动端 focus 行为不可靠 - 哪怕用
clip-path或transform-origin做视觉缩放，也无法让大图背景精准对齐鼠标落点
JS 必须参与的三个核心计算环节
真正可用的局部放大，JS 至少要完成三件事：获取容器真实偏移、换算点击相对坐标、反向映射 background-position。漏掉任一环，放大镜就会偏移或卡顿。
- 必须用
getBoundingClientRect()获取容器左上角相对于视口的位置，不能直接用e.clientX减去容器offsetLeft（滚动时错） - 必须用
getComputedStyle()扣除border和padding，否则放大镜总浮在鼠标右下方 -
background-position不是等比复制坐标：若小图 400×300，大图 1200×900（3 倍），则点击 (100, 50) 应设为background-position: -300px -150px，即乘以缩放比再取负
container 必须设 position: relative，且不能被 transform 干扰
放大镜元素（如 .magnifier）需要绝对定位，它的参考系必须是图片容器。如果容器本身用了 transform: scale(0.8) 或 rotate()，getBoundingClientRect() 返回的坐标会失真，导致后续所有计算偏移。
立即学习“前端免费学习笔记（深入）”；
- 容器样式中避免任何
transform，用width/height+scale()替代 - 如果页面有 zoom 缩放（如 Ctrl+），
devicePixelRatio可能影响精度，建议监听resize事件重算 - 移动端要监听
touchstart和touchmove，并用touches[0]取坐标，不能只靠 mouse 事件
最常被忽略的是盒模型干扰和缩放比映射——很多人直接把 e.clientX 赋给 left，又忘了大图尺寸是小图的 N 倍，结果放大镜飘在空中，显示的却是大图左上角固定区域。
