最稳妥方式是用隐藏遮罩层#imageModal承载大图，而非直接放大原图。关键含.zoomable-image（带data-large-src）、#imageModal（fixed+999）、.modal-content（JS动态设尺寸），居中用top:50%+left:50%+transform，加载完再淡入，需处理错误、重复绑定、ESC关闭及移动端适配。
点击缩略图后在遮罩层中显示大图
最稳妥的实现方式不是直接放大原图，而是用一个隐藏的 #imageModal 遮罩层承载大图。这样能避免页面重排、缩放失真、移动端 touch 区域错位等问题。
关键结构包含三部分：.zoomable-image（带 data-large-src 的缩略图）、#imageModal（固定定位全屏遮罩）、.modal-content（里面放实际大图）。
- 缩略图必须有
data-large-src属性，存放大图 URL，不能只靠修改src -
#imageModal要设display: none初始隐藏，并加z-index: 999确保压在所有内容上 -
.modal-content不要写死宽高，靠 JS 动态设置，否则响应式下会拉伸变形
用 JavaScript 控制 modal 显示与居中逻辑
居中不是靠 margin: auto 或 text-align，因为遮罩层是 position: fixed，得用 top: 50% + left: 50% + transform: translate(-50%, -50%) 组合。
但要注意：大图加载完成前不能计算尺寸，否则 offsetWidth 返回 0；也不能等 load 事件后再设样式，否则会闪一下。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 先设
display: block和opacity: 0，再把src赋值给.modal-content - 监听
.modal-content的onload，再读取naturalWidth/naturalHeight，按视口比例缩放 - 缩放后才设
opacity: 1，配合 CSStransition: opacity .2s实现淡入 - 别用
window.innerWidth直接算位置——要减去滚动偏移，即pageXOffset和pageYOffset
关闭 modal 时必须解绑事件并重置状态
常见错误是重复点击缩略图后，click 事件被多次绑定，导致点一次关多次；或关闭后没清空 .modal-content.src，下次打开还是旧图。
- 关闭按钮和遮罩层都应监听
click，但需判断e.target === modal || e.target === closeBtn，防止点到图上误关 - 关闭时设
.modal-content.src = ''，并手动触发onload = null，避免残留回调 - 键盘按
Escape也要支持，加document.addEventListener('keydown', ...)，注意只在 modal 显示时生效 - 移动端要加
touchstart替代click，iOS Safari 对click有 300ms 延迟
CSS 中 transform: scale() 和 width/height 的选择差异
直接改 width/height 会让图片像素拉伸，尤其高清图在 Retina 屏上模糊；用 transform: scale() 是 GPU 加速的缩放，保持清晰度，但要注意 origin 设置。
- 如果希望大图以原尺寸居中，就不要设
scale，只设max-width: 90vw和max-height: 80vh，再用object-fit: contain - 如果要做“从小图位置飞入居中”的动效，则必须用
transform: scale()+transform-origin，且 origin 要动态设为小图左上角坐标 -
transform不影响文档流，所以遮罩层里不用清 float 或处理外边距；但scale(2)后若容器没预留空间，可能溢出视口 - 别在
.modal-content上同时写width和transform，CSS 优先级易混乱，统一用 transform 控制尺寸更可控
真正容易被忽略的是：大图加载失败时 modal 仍显示黑屏，必须监听 onerror 并提示用户或自动隐藏 modal；还有 iOS Safari 在 position: fixed 遮罩层里，软键盘弹出会导致视口计算异常，需要额外监听 resize 并重算位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
