唯一可靠方式是用javascript监听mousemove实时设置transform-origin到鼠标坐标并配合scale；:hover无法读取坐标，只能固定中心缩放；wheel需缓存上次mousemove坐标并做边界检查；移动端需用双指中点而非鼠标逻辑。
直接监听 mousemove 并动态设置 transform-origin 到鼠标坐标，再配合 transform: scale()，是实现“鼠标悬停处为中心缩放”的唯一可靠方式。纯 :hover + scale() 只能固定中心缩放，不跟随鼠标位置。
为什么 :hover 不能让图片“跟着鼠标缩放”
很多人试过给 img 加 :hover { transform: scale(1.3); }，发现只是整体放大、中心不动——这完全正确，因为 :hover 是伪类，它无法读取实时鼠标坐标，更没法把缩放原点（transform-origin）动态设到 clientX/clientY。想“以鼠标为心放大”，必须用 JavaScript 实时计算并写入样式。
核心步骤：监听 mousemove → 计算相对坐标 → 更新 transform-origin 和 scale
关键不是放大图片本身，而是让浏览器知道“这次缩放该绕哪个像素点转”。这需要三步联动：
- 给图片加
position: relative，确保transform-origin基于自身盒模型计算 - 在
mousemove回调里，用event.clientX - img.getBoundingClientRect().left算出鼠标在图片内的横向偏移（同理算 Y），再转成百分比值（如`${x}px ${y}px`） - 同时更新两个 CSS 属性：
style.transformOrigin = `${x}px ${y}px`和style.transform = 'scale(1.4)' - 记得加
transition: transform 0.15s ease，否则缩放会跳变；但transform-origin不要加 transition，它必须瞬时生效，否则中心点会滞后
wheel 滚轮缩放时怎么保持“鼠标中心”不偏移
滚轮事件本身不带坐标，所以仅靠 event.deltaY 缩放会导致图片总绕左上角或中心缩，而不是你当前悬停的位置。解决方法是：在每次 wheel 触发前，先缓存最近一次 mousemove 的坐标；缩放时用该坐标算 transform-origin，再更新 scale。常见错误包括：
- 没缓存坐标，直接用
img.getBoundingClientRect()当前值——但滚轮时鼠标可能已移出图片，坐标为空 - 缓存了坐标却没做边界检查，导致
transform-origin落在图片外（如负值），缩放后内容完全不可见 - 缩放后没重置缓存坐标，下次
mousemove来临时原点错位 - 忘记对
deltaY节流，快速滚动时连续触发，scale值因浮点误差累积而卡住（建议用Math.max(0.3, Math.min(5, nextScale))截断）
移动端双指缩放和鼠标跟随不是一回事，别混用
触屏设备没有稳定“鼠标悬停”概念，mousemove 在 iOS/Android 上触发不可靠，且双指 pinch 手势的缩放中心是两指中点，不是单点坐标。强行把鼠标逻辑套到 touch 事件上，会导致：
- 单指滑动时误触发缩放
- 双指缩放中心漂移（因为没实时重算中点）
- 松手后图片卡在非预期位置（缺少 translate 补偿）
真正难的不是算出缩放倍数，而是让每一次缩放后，用户眼睛盯着的那个像素点，始终留在屏幕同一位置——这需要在缩放前后，用原始坐标 × 缩放差值，反向补偿 translateX/Y。这点在桌面端常被忽略，在移动端却是刚需。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
