用 CSS transform: scale() 实现放大镜效果需动态设置 transform-origin 为鼠标坐标，配合 will-change 提升性能，JS 负责 mousemove/touchmove 双事件监听与边界限制，无需第三方插件。
用 transform: scale() 实现基础放大镜效果
直接改图片的 transform: scale() 是最轻量、兼容性最好的做法，不需要 js，纯 css 就能跑通。关键是把缩放中心锚点调到鼠标位置，否则会偏移。
- 必须加
transform-origin: 0 0或动态设置为transform-origin: var(--x) var(--y)，否则默认以图片左上角缩放，看起来像“被拽走” - 推荐用
will-change: transform提升合成层，避免缩放时卡顿（尤其在低配设备上） - 别用
transition: all .3s—— 会连宽高、边框一起过渡，造成抖动；只写transition: transform .25s cubic-bezier(0.2, 0, 0, 1)
用 mousemove + getBoundingClientRect() 动态追踪鼠标位置
纯 CSS 无法读取鼠标坐标，要真·放大镜（镜片随鼠标移动），就得 JS 配合。核心不是“监听 mousemove”，而是实时算出鼠标相对于图片左上角的像素偏移。
- 别直接用
e.clientX / e.clientY：它们是视口坐标，得减去图片的offsetLeft/offsetTop或更稳的getBoundingClientRect().left/top - 记得限制
--x和--y的取值范围，防止镜片超出图片边界（比如Math.max(20, Math.min(imgWidth-20, x))） - 在
mouseenter时才绑定mousemove，mouseleave时立刻解绑，否则滚动页面时还在计算，白耗性能
img.addEventListener('mouseenter', () => {
img.style.setProperty('--scale', '1.8');
const handleMove = (e) => {
const rect = img.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
img.style.setProperty('--x', `${x}px`);
img.style.setProperty('--y', `${y}px`);
};
img.addEventListener('mousemove', handleMove);
img.addEventListener('mouseleave', () => {
img.removeEventListener('mousemove', handleMove);
}, { once: true });
});为什么不用 Bootstrap 自带的组件或插件
Bootstrap 5 官方没有提供放大镜组件，社区里所谓 “Bootstrap Zoom Plugin” 多数是套壳 jQuery 插件，依赖 $.fn.zoom 或重写 img 标签结构，和 Bootstrap 的 CSS 类无实际耦合。
- 强行引入这类插件会带来额外 DOM 结构（比如外层
<div class="zoom-container">），破坏你已有的响应式布局 - 很多插件默认禁用
touchstart，在 iPad 或安卓 Chrome 上点不动；而原生mousemove+touchmove双监听并不难写 - Bootstrap 的
.img-fluid和.rounded类可以照常使用，但插件常会覆盖max-width或object-fit，导致图片变形
移动端适配的关键细节
鼠标悬停在手机上根本不存在，必须补上触摸逻辑，且不能简单把 mousemove 换成 touchmove —— 触摸事件对象结构不同，而且单指 vs 多指要区分。
- 用
e.touches[0]取第一个触点，别用e.changedTouches[0]（它只在 touchend 时可靠） - 在
touchstart后立即e.preventDefault()，否则 iOS 会触发双击缩放，干扰镜片行为 - 加个防抖：连续快速滑动时，不要每帧都更新
--x/--y，用requestAnimationFrame节流更顺滑
CSS 变量 + 原生事件组合是最可控的路径。真正麻烦的不是实现，而是处理各种边界情况：图片加载中就 hover、父容器有 overflow: hidden、图片本身用了 object-fit: cover 还要保持镜片比例……这些细节不试一遍，光看示例代码根本绕不过去。
