最简实现是：监听图片click事件、动态创建带遮罩的dialog、插入原图并控制尺寸；需用data-large存大图URL，dialog内设max-width/max-height+object-fit:contain，Safari降级为div+手动ESC监听。
点击图片触发放大预览，用原生 HTML + CSS + JS 最简实现
不需要框架或插件，纯前端三行核心逻辑就能跑起来：监听 click、创建遮罩层、插入大图。关键不是“怎么炫”，而是“点一下就出来，再点一下就消失”，且不卡顿、不破坏页面流。
常见错误是直接用 <img> 的 src 塞进 <dialog> 或 position: fixed 层里，结果图片拉伸变形、遮罩盖不住滚动内容、ESC 关不掉——问题多出在尺寸控制和事件绑定时机上。
- 始终用原图 URL（不是缩略图的
src），但需提前确认该 URL 可访问且尺寸足够；缩略图建议加width/height或aspect-ratio防布局偏移 - 遮罩层必须设
z-index高于所有内容，且加inert或手动禁用背景交互，否则点击穿透仍可操作下层按钮 - 放大图容器用
max-width: 90vw; max-height: 90vh;+object-fit: contain;，避免强制拉伸或溢出
用 <dialog> 实现语义化预览（Chrome 97+ / Edge 97+）
<dialog> 是目前最接近“开箱即用”的方案，自带模态行为、ESC 关闭、焦点管理。但它不支持 Safari（截至 Safari 16.4），生产环境必须降级。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 把大图放在
<dialog>内部，不要用background-image—— 否则无法自然缩放、打印、右键保存 - 调用
myDialog.showModal()前，先设置img.src并监听load事件，防止空图闪现 - Safari 兼容写法：检测
HTMLDialogElement是否存在，不存在则 fallback 到div+ 手动focus()+keydown监听 ESC
<dialog id="preview-dialog">
<img id="preview-img" style="max-width:90vw; max-height:90vh; object-fit:contain;">
<button onclick="this.closest('dialog').close()">×</button>
</dialog>
给图片加 data-large 属性传大图地址，避免重复 DOM 查询
缩略图和大图 URL 不同是常态（如 thumb.jpg vs full.jpg），硬编码在 JS 里维护成本高。用自定义属性解耦最稳。
使用场景明确：当缩略图是 CMS 输出或用户上传生成，URL 规则不固定时，data-large 比 JS 里拼接路径更可靠。
- 属性值必须是完整可访问 URL，相对路径容易因当前页面路径变化而 404
- 不要用
data-src—— 它已被懒加载广泛占用，语义混淆易引发冲突 - 如果大图需鉴权（如临时 token），务必在生成 HTML 时就把带参 URL 写死到
data-large，JS 不拼接敏感参数
移动端双击放大、缩放手势支持不能只靠 CSS
CSS 的 touch-action: manipulation 只能优化双指缩放响应速度，无法实现“双击放大居中”这种逻辑。真要支持，得手写事件。
容易踩的坑：
- 监听
dblclick在 iOS Safari 上基本无效（被 zoom 行为拦截），必须用touchend+ 时间/位置判断模拟双击 - 缩放容器不能是
<img>自身，得包一层<div>并设transform-origin: center;，否则缩放中心偏移 - pinch-zoom 要禁用
user-scalable=no的 viewport 设置，否则系统级缩放被锁死，JS 也无能为力
复杂点在于：PC 端靠 click + ESC，移动端靠 touch + 双击 + 缩放，两套逻辑共存时，事件冒泡和 preventDefault 时机稍错一点，就会出现点不动、缩放失效、页面跟着滚。
