用onwheel实现图片缩放需绑定img元素、调用preventDefault()阻止默认滚动，结合deltaY判断方向、transform-origin实现鼠标中心缩放，并限制scale范围在0.2–5之间。
用 onwheel 捕获滚轮事件实现图片缩放
HTML5 本身不提供“图片缩放”内置能力，必须靠 JavaScript 控制 transform: scale() 或修改 width/height。关键在于精准捕获滚轮方向和幅度，避免页面滚动被干扰。
常见错误是直接给 onwheel 却没调用 event.preventDefault()，导致图片缩放时页面也跟着上下滚动。
- 必须在事件回调里加
event.preventDefault()，否则默认滚动行为会触发 - 推荐监听
img的wheel事件，而非window或父容器——更精准、避免误触 - 滚轮 delta 值（
event.deltaY）在不同浏览器中符号可能相反，统一用event.deltaY > 0 ? 'zoom-out' : 'zoom-in'判断方向更稳妥 - 缩放中心默认是左上角，要实现“鼠标悬停处为中心缩放”，需结合
getBoundingClientRect()计算偏移并设置transform-origin
transform: scale() vs 直接改 width/height
二者都能让图片变大变小，但行为差异明显：
-
scale()是 CSS 变换，不改变文档流，缩放后点击区域仍按原始尺寸响应；适合需要保持布局稳定的场景 - 直接改
width/height会重排版，可能影响周边元素；但缩放后点击热区与视觉一致，适合简单交互 -
scale()支持平滑过渡（加transition: transform 0.15s ease），而宽高变更默认无动画，需手动加transition且兼容性略差 - 高倍缩放时，
scale()更易出现边缘锯齿（尤其非整数倍），可加image-rendering: -webkit-optimize-contrast缓解
限制缩放范围与防止失控
用户连滚几下滚轮，很容易把图片缩到 0.1 倍或 5 倍，失去控制。必须设硬性边界：
立即学习“前端免费学习笔记（深入）”；
- 维护一个当前缩放值
currentScale（初始设为1），每次滚轮后计算新值：currentScale *= (event.deltaY > 0 ? 0.9 : 1.1) - 立即截断：用
Math.min(Math.max(currentScale, 0.2), 5)锁死 0.2–5 倍区间 - 不要用
toFixed(2)截断小数再赋值——浮点误差累积会导致缩放卡顿，应始终用原生数字参与运算，仅展示时格式化 - 缩放归零或溢出时，建议重置按钮（如双击
currentScale = 1），比强制拉回更符合直觉
移动端适配：触控缩放不能只靠滚轮
手机和平板没有滚轮，onwheel 完全无效。若需全平台支持，必须补充手势逻辑：
- 监听
touchstart记录双指初始距离，touchmove中实时计算当前距离，用比值驱动scale - 别自己写双指缩放算法——用
pinch-zoom-js或hammer.js等成熟库更稳，它们已处理 touchcancel、多点并发、iOS Safari 的 touch-action 冲突等问题 - 纯 HTML5 方案下，至少加一句
img { touch-action: none; }，否则 iOS 会拦截 touch 事件用于页面拖拽 - 注意：PC 端 Chrome 有时会把双指触控模拟成
wheel事件，但行为不可靠，不能当作跨端替代方案
滚轮缩放看着简单，真正落地时缩放锚点、边界控制、多端一致性这三处最容易漏掉——尤其 transform-origin 动态计算和 touch-action 设置，线上出问题往往就卡在这两个地方。
