合理组织大图查看器DOM结构需外层fixed定位容器隔离，内部用absolute定位图片和底层遮罩层；缩放须用transform: scale()配合动态origin计算，禁用background-image；拖拽位移需独立translate叠加；wheel/touch事件需防默认行为、设缩放边界及中心点，并处理PC/移动混用冲突。
大图查看器的 DOM 结构怎么组织才合理
直接用 <img> 标签撑满全屏会丢失控制权，缩放、拖拽、关闭都难处理。必须用容器隔离：外层 <div class="viewer"> 作为定位上下文，内部嵌套 <img> 和遮罩层。
关键点是给容器设 position: fixed + z-index，图片用 position: absolute 居中，避免影响页面流；遮罩层（<div class="viewer-overlay">）放在最底层，点击它触发关闭。
常见错误：把图片设为 background-image —— 后续无法获取原图尺寸、不支持右键保存、缩放时模糊更明显。
用 transform 实现平滑缩放而不是 width/height
width 和 height 改变会触发重排（reflow），动画卡顿，且无法配合 translate 精确居中。必须用 transform: scale() 配合 transform-origin: center。
立即学习“前端免费学习笔记（深入）”；
缩放值不能硬编码，得基于原始尺寸动态计算：
- 先用
img.naturalWidth/img.naturalHeight拿到原图分辨率 - 再根据视口宽高算出最大安全缩放比（比如
Math.min(innerWidth / naturalWidth, innerHeight / naturalHeight)） - 初始缩放建议设为
Math.min(1, maxScale)，避免小图被强行拉伸
注意：transform 缩放后，元素的布局尺寸不变，所以拖拽位移要用 translateX/Y 单独叠加，不能混在同一个 transform 值里拼字符串 —— 否则 scale 变化时位移会意外重置。
鼠标滚轮缩放的事件绑定与边界限制
监听 wheel 事件时，必须调用 event.preventDefault()，否则会触发页面滚动；同时用 event.deltaY 判断方向（负值放大，正值缩小）。
缩放不能无限制，需设定上下限（如 0.2～5）并实时约束：
- 每次缩放后立即检查当前
scale是否越界，越界则截断并重设transform - 缩放中心点默认是鼠标位置，用
getBoundingClientRect()+clientX/Y换算成相对于图片左上角的偏移，再通过transform-origin动态设置（注意单位是百分比） - 缩放后若图片尺寸小于视口，应自动重置位移（
translate(0, 0)），避免留白错位
移动端双指缩放的 touch 事件要点
PC 端靠 wheel，移动端必须用 touchstart/touchmove 计算两指距离变化率。别直接监听 gesturestart —— 它已被大多数浏览器弃用且不可靠。
核心逻辑是记录第一组 touch 的两点坐标，后续每次 touchmove 重新计算欧氏距离，和初始距离做比值得到缩放系数：
- 只在
touches.length === 2时计算，单指滑动交给原生滚动 - 要防抖
touchmove，避免高频触发导致 transform 累积误差 - 缩放过程中禁止
touchmove默认行为（preventDefault），否则会触发页面缩放或滚动 - 松手（
touchend）后要做一次“吸附”：如果缩放值离整数倍（如 1x、2x）很近，可微调到最近的档位，提升体验
真正麻烦的是 PC 和移动混用场景：比如 Chrome 桌面版开启设备模拟后，会同时触发 wheel 和 touch 事件，得用时间戳或 flag 做互斥判断，否则缩放会跳变两次。
