html原生标签仅支持按尺寸预览，无法实现可靠放大预览；所有“点击放大”“双指缩放”“拖拽查看”均需手动补全javascript逻辑，modal弹窗配合data-large高清图地址、transform: scale()及事件控制才是可控方案。

直接用 <img> 标签不可能实现可靠放大预览——所有“点击放大”“双指缩放”“拖拽查看”都得靠你手动补逻辑，不是加个属性就能开箱即用。

点击弹出 modal 是唯一靠谱的起点

别试图在原位置放大缩略图，那只是视觉欺骗，用户真正要的是看清原图细节。modal 路径最可控，也最容易补全交互闭环：

• 用 data-large 存高清图地址，而不是塞进 src ——避免页面加载时就拉取几 MB 大图
• modal 容器必须设 max-width: 90vw 和 max-height: 90vh，只写一个会撑爆视口（尤其竖图）
• 预览图本身要写 width: auto; height: auto;，靠浏览器按原始宽高比缩放，不是靠 object-fit
• 遮罩层用 position: fixed + z-index，但别忘了打开时加 body { overflow: hidden }，关闭时必须手动恢复，否则页面卡死不能滚

滚轮缩放必须 preventDefault()，且限制范围

监听 wheel 事件后不阻止默认行为，浏览器会同时触发缩放和页面滚动，体验灾难：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 用 e.deltaY > 0 判断是缩小还是放大，别反了
• scale 值建议锁在 0.5 ~ 5 区间，小于 0.5 图片太小，大于 5 渲染模糊且内存暴涨
• 每次更新 transform: scale() 前，必须同步重设 transform-origin: center，否则缩放中心偏移
• 移动端完全不用处理 wheel —— 它根本不会触发，iOS/Android 默认手势已接管

移动端双指缩放只能手写 touch 事件

CSS 的 transform 只负责结果，过程控制全靠 JS 计算两指距离变化：

• touchstart 里记录两指初始间距 initialDistance 和中心点坐标
• touchmove 中实时算当前间距，得出缩放比 scale = currentDistance / initialDistance
• 同时根据手指中心点偏移更新 translate(x, y)，否则图片会“漂移”
• 务必在 touchmove 里调用 e.preventDefault()，否则手势被浏览器当滚动拦截
• iOS Safari 需给模态层加 -webkit-overflow-scrolling: touch，不然缩放后拖拽卡顿

最容易漏掉的三件事：资源、焦点、清理

功能跑通只是开始，反复打开关闭后出问题，基本都栽在这三处：

• 大图 src 必须延迟到 modal 显示后才赋值，不要提前 new Image() 加载；失败时 fallback 到缩略图 URL
• ESC 关闭必须监听 document 级 keydown，不是 modal 元素上——焦点可能不在它里面
• modal 移除时，清空 img.src、移除所有 addEventListener、把 will-change 设回 auto，否则内存泄漏在 SPA 里会越来越卡

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！