应使用动态创建遮罩层+大图容器方案：点击时生成fixed定位的preview-overlay，内置img加载data-large-src，onload后按视口缩放并淡入；支持esc/点击遮罩关闭，处理错误、移动端手势及旧浏览器降级。
用原生 HTML + CSS + JavaScript 实现点击放大预览，核心是“不放大原图，而是弹出高清图”，避免拉伸模糊、布局抖动和移动端缩放失效。关键不在加个 onclick 改宽高，而在构建一个可控、可访问、可还原的临时预览层。
用遮罩层 + 动态大图容器（最稳方案）
不复用固定 DOM，每次点击都动态创建或重置预览结构，防止多图错乱、残留状态或重复绑定事件。
- 给每张缩略图加
data-large-src属性，存放大图 URL（别直接塞src，避免提前加载） - 点击时创建
<div class="preview-overlay">（<code>position: fixed+z-index: 9999），内部放<img class="preview-img"> - 先设
opacity: 0和display: flex，再赋值src；监听onload后读取naturalWidth / naturalHeight，按视口比例缩放并设opacity: 1 - 图片样式用
max-width: 90vw; max-height: 90vh; object-fit: contain;，保持原始比例不拉伸 - 打开后立即
document.addEventListener('keydown', e => e.key === 'Escape' && closePreview()) - 遮罩层
click事件中判断e.target === overlay才关闭，避免点到图上误关 - 关闭时清空
.preview-img.src、移除事件监听器、还原body滚动（body.style.overflow = ''）、并将焦点返回原缩略图（originImg.focus()） - 为
.preview-img绑定onerror：插入提示文字 + “复制地址”按钮，调用navigator.clipboard.writeText(largeSrc) - 移动端必须确保
<meta name="viewport">不含user-scalable=no或maximum-scale=1.0 - 图片容器加
style="touch-action: pan-x pan-y;"（iOS Safari 需要），安卓建议包一层<div class="img-wrapper"> 再加该样式 <li>禁用 <code>background-image实现预览——它无法响应onerror，也不支持object-fit和自然尺寸计算 - 检查
'showModal' in HTMLDialogElement.prototype，不支持则用div模拟：加role="dialog" aria-modal="true"，手动管理焦点链 - 避免在
<dialog></dialog>内用position: fixed居中——用margin: auto+width/max-width更可靠 - 调用
dialog.showModal()前务必设dialog.open = true，否则 Safari 可能报错
支持 Esc 关闭与点击遮罩关闭（体验不卡顿）
用户点一下就进去了，但出不来会立刻失去信任。必须主动接管键盘和鼠标行为。
处理加载失败与移动端适配（细节决定是否可用）
网络不稳定、路径错误、跨域限制都可能导致大图白屏，而 iOS/Android 对手势的支持也完全不同。
兼容旧浏览器的降级思路（不用放弃 Safari 15.4 以下）
<dialog></dialog> 语义好、逻辑省，但老 Safari 不支持 backdrop 或 showModal()。不必全盘放弃，可检测后优雅降级。
