用 transform: scale() 实现图片缩放最直接，需配合 transform-origin: center、滚轮/touch双指事件监听、缩放范围限制（0.1～5）、位移补偿防止偏移，并禁用默认行为避免冲突。
用 transform: scale() 实现图片缩放最直接
HTML5 本身没有专门的“图片缩放”标签或 API，核心靠 CSS 的 transform: scale() 配合 JavaScript 控制。不推荐用 width/height 动态改尺寸，会拉伸失真、触发重排，性能差且无法保持中心缩放。
关键点：
-
transform-origin: center必须设，否则缩放以左上角为基点，体验极差 - 缩放值建议控制在
0.1～5区间，避免过小看不清或过大内存暴涨 - 对
监听鼠标滚轮实现缩放：注意
event.deltaY和方向处理滚轮缩放是最常用交互，但原生
wheel事件的deltaY值因设备而异（Mac 触控板、Windows 鼠标、Chrome/Firefox 默认步长都不同），不能直接当缩放系数用。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
event.preventDefault()阻止页面滚动，否则缩放和滚动会打架 - 按惯例：向上滚（
deltaY ）放大，向下滚（deltaY > 0）缩小 - 引入缩放因子（如
0.001）把滚轮量映射到平滑变化：scale = Math.max(0.1, Math.min(5, currentScale - event.deltaY * 0.001)) - 务必限制最小/最大值，防止
scale变成0或无穷大导致渲染异常
双指缩放（移动端）必须用
touchmove+ 两点距离计算移动端没有滚轮，得靠
touchstart和touchmove手动算两指间距变化。浏览器不会自动把 pinch 手势转成scale值。关键步骤：
- 在
touchstart记录初始两点坐标，算出初始距离startDistance - 在
touchmove实时重算当前距离currentDistance，缩放比 =currentDistance / startDistance - 用
event.touches.length === 2过滤单指操作，避免误触 - 记得清除
touchend时的状态，否则下次缩放会继承上次比例 - 禁用默认行为：
event.preventDefault()，否则 iOS 会触发页面缩放（viewport 缩放），和你的图片缩放冲突
缩放后位置偏移？用
transform: translate()补偿中心点单纯
scale()会让图片视觉中心“漂移”，尤其放大后内容往左上跑。这是因为缩放基于元素盒模型原点（左上角），即使设了transform-origin: center，容器尺寸没变，溢出部分被裁剪，用户感觉“图片跑了”。解决办法是联动位移补偿：
- 监听缩放变化时，记录鼠标/手指在图片内的相对坐标（如
clientX - img.getBoundingClientRect().left） - 缩放后，用该坐标反推需要的
translateX/translateY偏移量，保证该点始终在视口同一位置 - 更轻量的做法：只在缩放过程中实时更新
transform: scale() translate()，缩放结束再重置translate为 0，靠 CSS 过渡保持顺滑 - 如果用了
overflow: hidden的容器，补偿不到位会导致图片突然“跳一下”，这是最常被忽略的细节
- 用
