用原生JavaScript通过toggle data-zoomed 属性控制图片transform: scale()缩放，配合transform-origin: center和transition实现平滑居中放大；避免zoom等非标属性，移动端需处理touchstart，复杂场景需动态创建遮罩层并基于getBoundingClientRect()和滚动偏移精确居中。
点击图片触发放大，再点恢复原尺寸
直接用原生 JavaScript 监听 click 事件，切换图片的 style.transform 即可，不需要引入任何库。关键在于：放大时设为 scale(2)，同时加 transition 让动画平滑；恢复时清空或重置为 scale(1)。注意别用 width/height 调整尺寸——会拉伸失真，transform: scale() 才是正确做法。
常见错误是只改了 scale 却没加 transform-origin: center，导致图片从左上角缩放，视觉偏移。务必补上：
img {
transition: transform 0.2s ease;
transform-origin: center;
}
避免多次点击后 scale 值叠加错乱
用 getComputedStyle(img).transform 判断当前状态不可靠（返回矩阵字符串难解析），更稳妥的是用自定义属性标记状态。比如初始时给 <img> 加 data-zoomed="false"，点击时 toggle 这个值，并据此决定缩放比例。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 绑定事件时用事件委托（如监听
document），避免给每张图单独加 listener - 放大后临时加
z-index: 9999防止被其他元素遮挡 - 放大时禁用
pointer-events: none可能导致二次点击失效，应保持pointer-events: auto - 移动端需额外处理
touchstart，否则点击无响应
兼容性差的写法：用 zoom CSS 属性
zoom 是非标准属性，Chrome/Edge 虽支持，但 Firefox 完全不认，Safari 也已弃用。一旦用了，Firefox 用户点击毫无反应，且无法通过 @supports 可靠检测。必须改用 transform: scale()。
另外两个坑：
-
transform会触发新层叠上下文，可能影响z-index行为，放大图若要浮在最上，得确保父容器没设overflow: hidden - 如果图片在
flex或grid容器里，scale()不会改变其布局占位，这是优点也是缺点：放大后不会挤开周围元素，但也没法靠布局自动居中
需要居中+背景遮罩？那就得手动算位置
纯 scale() 只缩放，不移动。要实现「点击后图片居中放大、带半透明遮罩」，就得动态创建一个 <div class="overlay"> 插入 body，再把图片克隆进去并绝对定位居中。
核心难点不是放大，而是计算居中坐标：
- 用
img.getBoundingClientRect()拿到原图在视口中的位置 - 遮罩层宽高设为
100vw/100vh，图片设max-width: 90vw和max-height: 80vh防溢出 - 别用
top: 50%; left: 50%; transform: translate(-50%, -50%)—— 在滚动页面时会错位，应基于window.scrollY动态修正
这个层级和定位逻辑，比单纯缩放复杂得多，容易忽略滚动偏移和 body 的 padding/margin 干扰。
