纯css仅支持静态缩放，交互式缩放平移必须用javascript；核心是锚定鼠标位置动态计算translate补偿、限制scale范围、节流wheel事件、document绑定mousemove、初始fit-to-view适配及实时边界检测。
用 CSS transform 实现图片缩放和平移的核心逻辑
纯 CSS 方案可行，但仅适用于静态缩放（比如 hover 放大），无法响应鼠标拖拽或滚轮缩放。真正可交互的缩放平移必须依赖 JavaScript 监听事件并动态更新 transform: scale() translate()。关键在于：缩放中心要锚定在鼠标位置，否则图片会“漂移”。这需要实时计算相对于图片容器的坐标偏移，并反向补偿。
- 缩放时，先记录鼠标在图片上的相对坐标（
clientX - rect.left等） - 更新
scale后，用该坐标乘以缩放差值，修正translateX/Y - 平移状态需持续累加，不能每次重置为 0，否则拖拽会跳变
- 务必限制
scale范围（如0.5–5），避免数值溢出或 UI 崩溃
监听 mousewheel 和 mousedown/mousemove 实现基础交互
滚轮控制缩放，按住左键拖拽实现平移——这是最符合直觉的操作模式。注意：Chrome/Firefox 的 wheel 事件默认触发频繁，需节流；而 mousemove 在拖拽中必须绑定到 document 上，防止鼠标移出图片区域后中断拖拽。
- 对
wheel事件调用event.preventDefault()，阻止页面滚动 - 缩放增量建议用
Math.pow(1.08, event.deltaY * -0.01)，比线性更自然 - 拖拽起始时保存
startX/startY和当前translateX/translateY - 拖拽中计算
newX = startX + (currentX - downX)，再赋给style.transform
用 image.naturalWidth 和容器尺寸做初始适配
首次加载图片后，不能直接设 scale=1，否则可能撑爆容器或太小看不清。应根据图片原始尺寸和父容器宽高，计算一个 fit-to-view 的初始缩放值，并居中定位。
- 获取
img.naturalWidth和img.naturalHeight（必须等load事件后） - 计算
scale = Math.min(containerW / natW, containerH / natH, 1)，保证不超界 - 初始
translateX = (containerW - natW * scale) / 2，同理算 Y，实现居中 - 把初始值存进组件状态（如
this.state.scale），后续所有操作基于它更新
边界检测与拖拽阻尼：避免图片“滑出视野”
用户拖拽时，如果不限制位移范围，图片很容易被拖到看不见的位置。需要在每次更新 translateX/Y 前，根据当前 scale 动态计算允许的平移上下限。
- X 方向最大左移量：
maxX = (imgWidth * scale - containerW) / 2（负值） - X 方向最大右移量：
minX = -maxX；实际取值用Math.max(minX, Math.min(maxX, newX)) - 同理计算 Y 边界；注意：这些值随
scale实时变化，不能只算一次 - 若想加阻尼效果（拖到边缘有回弹感），可在边界附近线性衰减拖拽速度，而非硬截断
真正难的不是写完缩放，而是处理好缩放中心、坐标系转换、边界判断三者之间的耦合。漏掉任意一环，都会出现“缩着缩着图片不见了”或者“拖两下就卡死”的情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
