纯前端实现图片预览需监听点击创建fixed遮罩，用max-width/max-height+auto宽高保持比例，esc或点背景关闭并恢复body滚动，禁用user-scalable=no以支持原生缩放，且必须处理图片加载失败。
点击图片触发原图预览，用原生 HTML + CSS + JS 最简实现
不需要框架、不依赖第三方库，纯前端就能搞定。核心思路是：监听图片点击 → 创建遮罩层 → 把原图塞进遮罩层居中显示 → 点击遮罩关闭。关键不是“怎么放大”，而是“怎么安全地临时覆盖全屏并还原”。
-
img标签必须有src，且最好带alt；如果src是缩略图路径，需确保同名原图存在（如thumb.jpg→full.jpg），或提前在data-fullsrc里存好原图地址 - 遮罩层用
position: fixed+z-index，避免被其他元素遮挡；但注意不要影响页面滚动条行为（body { overflow: hidden }要配对恢复） - 预览图宽高用
max-width: 90vw; max-height: 90vh控制，不写死像素值，适配各种屏幕
如何让预览图自动适应屏幕又不失真
直接设 width: 100% 或 height: 100% 会拉伸变形。正确做法是限制最大尺寸 + 保持原始宽高比：
.preview-img {
max-width: 90vw;
max-height: 90vh;
width: auto;
height: auto;
display: block;
margin: auto;
}
- 必须同时设
max-width和max-height，否则竖图可能溢出视口 -
width: auto; height: auto是关键，它让浏览器按比例缩放，而不是强制拉伸 - 不要用
object-fit: contain—— 它在部分旧版 Safari 上表现异常，且对居中控制更难
点击空白处或按 Esc 关闭预览的可靠写法
用户习惯是点遮罩背景或按 Escape 键退出。但要注意事件冒泡和焦点问题：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给遮罩层（
.overlay）绑定click事件，但只在e.target === overlay时关闭，防止点到图片本身也触发关闭 - 监听
keydown时检查e.key === 'Escape'，别用e.keyCode（已废弃） - 关闭时记得移除
body的overflow: hidden，否则页面会卡住不能滚动 - 用
document.addEventListener('keydown', ...)，而不是绑定在遮罩上——因为 Esc 按下时焦点不一定在遮罩内
移动端双击放大和手势缩放为什么不该自己实现
原生 <img> 在 iOS/Android 浏览器里默认支持双击放大、捏合缩放，前提是没禁用 user-scalable=no。自己用 JS 实现手势识别不仅复杂，还容易和系统行为冲突。
- 确保
<meta name="viewport">中没有user-scalable=no，保留initial-scale=1.0 - 预览图容器不要加
touch-action: none，否则手势被拦截 - 如果业务强求“禁止缩放”，那不如放弃手势交互，只提供单张原图查看——强行模拟手势体验极差，且维护成本高
最常被忽略的是：预览图加载失败时没 fallback。务必监听 onerror 并提示用户，而不是留白或卡死。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
