关键在于使用高分辨率原图配合CSS transform缩放：通过srcset/sizes提供多分辨率资源，预览时加载data-fullsrc指定的高清图，用transform: scale()替代width/height拉伸，并结合naturalWidth/Height计算初始比例实现无损缩放。

在 H5 中实现响应式图片点击放大预览且保持无损缩放，关键在于：图片源需提供足够高分辨率（如 2x 或 3x），预览层使用原图尺寸渲染，并通过 CSS transform + transition 实现平滑缩放，同时避免 img 标签自身拉伸失真。

1. 响应式图片基础：用 srcset 和 sizes 提供多分辨率资源

确保不同设备加载合适分辨率的图片，为后续放大提供清晰原图基础：

• 使用 srcset 指定多个图片地址及对应像素密度（如 image@1x.jpg 1x, image@2x.jpg 2x）或宽度描述（如 image-400.jpg 400w, image-800.jpg 800w）
• 搭配 sizes 属性声明图片在视口中的显示宽度（如 sizes="(max-width: 768px) 100vw, 50vw"），让浏览器智能选择最匹配的资源
• 始终保留一个高质量的原图 URL 作为 fallback（src），用于预览时加载高清版本

2. 点击预览：用原图 URL 渲染大图，不依赖缩略图拉伸

预览层的 必须加载原始高清图（非页面中已压缩/缩放的响应式版本），否则放大只是“放大模糊”：

• 给缩略图添加自定义属性，如 data-fullsrc="image-full.jpg"，存储高清图路径
• 点击时将该 URL 赋给预览 的 src，并用 onload 触发居中与缩放逻辑
• 预览图容器设为 display: flex; justify-content: center; align-items: center;，让图片自然居中

3. 无损缩放：用 transform 缩放，而非 width/height 拉伸

直接修改 width/height 会导致浏览器重采样、图像模糊；正确做法是固定图片原始尺寸，用 transform: scale() 放大：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 预览 设置 width: auto; height: auto; max-width: none; max-height: none;，禁用默认约束
• 获取图片原始宽高（img.naturalWidth/naturalHeight）和容器可视区域尺寸
• 计算初始缩放比例：取 Math.min(containerWidth / naturalWidth, containerHeight / naturalHeight)，保证完整可见
• 双击或手势放大时，仅更新 transform: scale(2) 等值，配合 transition: transform 0.2s ease 实现丝滑效果

4. 补充细节：手势支持与内存优化

移动端体验更佳需补充交互能力，同时避免内存泄漏：

• 监听 touchstart/touchmove 实现双指缩放（可借助 pinch-to-zoom 库或手动计算缩放因子）
• 预览关闭时，清空 的 src 并设为 null，释放图片解码内存
• 对长图/超大图，可考虑懒加载预览图，或用 Canvas 分块渲染（进阶场景）

不复杂但容易忽略：无损的核心不是“能不能放大”，而是“放大的是不是原图 + 有没有用硬件加速的缩放方式”。只要预览用的是原始高清资源，且缩放靠 transform 完成，就天然规避了插值失真问题。