缩略图保持响应式需设display: block、禁用object-fit、确保父容器有明确宽度约束，并用naturalWidth/Height与offsetWidth/Height动态计算缩放原点，避免坐标映射失真。
点击图片局部放大时，缩略图如何保持响应式尺寸
缩略图本身用 max-width: 100% 和 height: auto 是基础，但局部放大功能一加，就容易崩——因为放大逻辑依赖图片的显示尺寸（offsetWidth/offsetHeight）与原始尺寸（naturalWidth/naturalHeight）的比例关系。一旦缩略图被父容器挤压、拉伸或受 object-fit 干扰，坐标映射就会偏移。
- 确保缩略图容器有明确宽度约束（如
width: 100%或max-width: 600px），否则max-width: 100%在无父宽时无效 - 缩略图必须设
display: block，避免行内默认基线对齐导致getBoundingClientRect()计算出错 - 禁用
object-fit（尤其cover或contain），它会裁剪/拉伸视觉内容但不改变offsetWidth，造成坐标归一化失真 - 若必须用
object-fit，改用background-image+div替代img，并手动同步尺寸逻辑
局部放大中心点偏移的根本原因和修复
常见现象：点击缩略图中间，放大的却是左上角；或者点击右下角，放大区域完全跑出画面。这不是 JS 写错了，而是把点击坐标直接当成了像素偏移，没做归一化转换。
核心问题在于：缩略图在屏幕上显示为 300×200 像素，但原始图是 1200×800 像素，缩放比是 4:1。你点击的位置是相对于显示尺寸的，但 transform-origin 需要的是相对于原始尺寸的百分比位置。
- 必须用
img.naturalWidth和img.naturalHeight获取真实分辨率 - 用
img.offsetWidth/img.offsetHeight获取当前渲染尺寸 - 计算 origin 值：
const originX = ((e.clientX - rect.left) / img.offsetWidth) * 100 + '%'，同理算 Y - 不要用
event.offsetX—— Firefox 不支持，Safari 在某些嵌套结构下返回异常值
放大容器溢出、定位错乱的 CSS 关键设置
即使 JS 算得再准，CSS 没配对，效果也白搭。局部放大本质是 transform: scale() + transform-origin，但它的表现极度依赖容器的层叠上下文和裁剪行为。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 放大目标元素（通常是
overflow: hidden的父容器，否则放大后内容会撑开布局或溢出 - 该父容器必须是
position: relative，否则transform-origin以视口为参考，不是以图片为参考 - 避免给放大中的
width/height固定值，它应只靠transform变形，否则触发重排且破坏比例 - 移动端需加
touch-action: manipulation到缩略图，防止 iOS Safari 把双击缩放和你的 click 事件冲突
为什么 srcset 和 picture 标签对局部放大没用
srcset 和 naturalWidth 吗？影响，但只在图片加载完成之后。而局部放大逻辑若在图片未加载完就执行（比如用户快速点击），naturalWidth 是 0，坐标计算直接失效。
- 务必监听
img.onload或使用img.complete && img.naturalWidth做守卫，再绑定 click 事件 - 不要在
document.ready就初始化放大逻辑，此时图片可能还没解码，naturalWidth不可靠 -
srcset提供的多分辨率图，最终决定naturalWidth的是浏览器实际加载的那张，所以你的归一化计算必须基于运行时的真实值，不能硬编码
最易被忽略的一点：缩略图若用了 border、padding 或 outline，getBoundingClientRect().left/top 包含这些值，但 offsetWidth/Height 不包含，会导致归一化偏差。要么全去掉，要么在计算时显式减去 parseFloat(getComputedStyle(img).borderLeftWidth) 等。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
