原生 是最轻量可靠的现代方案，chrome 97+、firefox 98+、safari 15.4+ 原生支持，点击放大、遮罩关闭、Esc 关闭均无需 js 库，配合 showModal()、role=”dialog”、aria-modal=”true” 及 ios 专用 css 修复滚动与 backdrop 问题即可。
用 click 事件 + dialog 元素最轻量可靠
现代浏览器（Chrome 97+、Firefox 98+、Safari 15.4+）原生支持 ，无需 JS 库就能实现点击放大、点击遮罩关闭、按 Esc 关闭。比手动操作 z-index 和 transform 更稳定，也避免了 position: fixed 在 iOS Safari 中的滚动错位问题。
关键点：
-
默认不显示，必须调用.showModal() - 图片需设为
max-width: 90vw; max-height: 90vh;防止溢出 - 必须给
加role="dialog"和aria-modal="true"以满足可访问性
@@##@@ iOS Safari 下 dialog 不触发或背景不锁定？加这两行 CSS
iOS Safari 对 的实现有延迟渲染和滚动穿透问题，仅靠 html/JS 不够。必须显式锁定 body 滚动，并防止 backdrop 点击穿透失效。
解决方式：
立即学习“前端免费学习笔记（深入）”；
- 监听
dialog:show和dialog:close事件控制body样式 - 给
dialog::backdrop设background: rgba(0,0,0,0.8)，否则 iOS 可能渲染为空白
不想用 dialog？Object-fit: contain + transform: scale() 手动控制更灵活
当需要自定义动画、支持老浏览器（如 IE11）、或要叠加标注/下载按钮时，放弃 改用绝对定位容器 + CSS 动画更可控。但要注意：直接用 width/height 改变图片尺寸会失真，必须配合 object-fit。
核心要点：
- 放大容器用
transform: scale(1.2)，而非改width，保持清晰度 - 图片父容器设
overflow: hidden，避免缩放后边缘外露 - 用
transition: transform 0.2s ease实现平滑入场
@@##@@ 为什么不用 lightbox 类库？兼容性和体积是硬伤
像 lightGallery.js 或 fancybox 这类库在移动端常出现手势冲突（双指缩放失效）、z-index 覆盖失败、或引入大量未使用的 CSS/JS。尤其当项目已用 ES modules 或 vite 构建时，这些 jquery 时代的老库会破坏 tree-shaking。
实际取舍建议：
- 仅 1–3 张图 → 用原生
，代码不到 30 行 - 需拖拽/缩放/下载/EXIF 显示 → 再考虑
PhotoSwipe（它已支持 ESM，且无 jQuery 依赖） - 必须兼容 IE11 → 放弃
，用纯 CSS +transform方案，但要补msTransform
真正容易被忽略的是：无论用哪种方案，alt 属性必须同步传入放大视图，否则屏幕阅读器无法读取——这点在所有 demo 示例里都常被漏掉。
