用原生HTML+CSS+JS实现图片点击放大modal：为.zoomable图片绑定点击事件，动态创建fixed定位的flex居中modal，设置max-width/max-height和object-fit:contain，支持Esc/遮罩关闭及移动端双指缩放，注意IE11兼容性与图片加载状态处理。
点击图片触发 modal 显示原图，用原生 HTML+CSS+JS 最简实现
不用框架、不引第三方库，纯前端三件套就能搞定。核心是：给 <img alt="HTML怎么设置图像点击放大效果_HTML modal image viewer教程【交互】" > 绑点击事件，动态生成遮罩层和大图容器，再把原图的 src 赋给它。
常见错误是直接写死一个 <div id="modal"> 在页面底部，结果多张图共用同一个 modal，点击第二张时显示的还是第一张的地址——因为没清空或更新 <code>src。
- 每张可点图片加
class="zoomable"，方便统一绑定 - modal 结构必须动态创建或每次重置
src和style.display - 别忘了给 modal 图片加
max-width: 90vw; max-height: 90vh;，否则超大图会撑爆视口 - 按
Esc关闭、点击遮罩关闭，这两个交互点漏掉用户会卡住
如何让放大图居中且自适应窗口大小
不是靠 margin: auto 就完事。modal 容器得用 display: flex + align-items: center + justify-content: center，同时确保父容器（即 ）高度为 100vh，否则 flex 居中失效。
图片本身还要加 object-fit: contain，不然宽高比失真；如果想支持缩放拖拽，那已超出原生能力范围，得上 transform: scale() 配合 mousemove，但绝大多数场景没必要。
立即学习“前端免费学习笔记（深入）”；
- modal 的
position必须是fixed，不能是absolute - 遮罩层背景用
rgba(0,0,0,0.8)，别用纯黑，否则看不清边缘 - 图片宽高设为
auto，靠max-width/max-height控制上限，保留原始比例
移动端点击放大后无法缩放？这是 viewport 和 touch-action 搞的鬼
iOS Safari 默认禁掉双指缩放，哪怕在 modal 里也不行。关键就两处：<meta name="viewport"> 里不能有 user-scalable=no，以及 modal 图片容器要加 style="touch-action: manipulation;"（允许双指缩放）。
另外，安卓部分浏览器对 img 元素的 touch-action 支持不一致，稳妥做法是把图片包一层 <div class="modal-img-wrapper">，样式加在 wrapper 上。
<ul>
<li>检查当前页面的 <code><meta name="viewport"> 是否含 user-scalable=no 或 maximum-scale=1.0
touch-action: pinch-zoom;（Chrome 支持更好）touchstart 后调用 preventDefault()，这会直接封死缩放手势IE11 兼容性问题：flex 居中失效、dataset 报错、classList 不支持
如果还得兼容 IE11，别用 element.dataset.xxx 存原图地址，改用 getAttribute('data-fullsrc')；modal 容器的居中别依赖 flex，换成绝对定位 + transform: translate(-50%, -50%)；classList.add/remove 得降级成操作 className 字符串。
更实际的建议是：确认业务是否真需要支持 IE11。现在很多 CDN 图床返回的 WebP 图片 IE11 根本打不开，这时候强行兼容 modal 反而暴露更多底层缺陷。
- IE11 不支持
const/let，脚本需用var声明变量 -
document.querySelector可用，但closest()需 polyfill 或手写遍历 - modal 的
z-index建议设到9999级别，IE 对层叠上下文计算特别敏感
最易被忽略的是图片加载状态：用户快速连点两张图，第二张还没加载完就关掉 modal，再点第三张，可能显示的是第二张的 loading 占位或旧缓存。处理方式很简单——每次打开前先清空 src，再赋新值，并监听 onload 才显示 modal。
