img-fluid仅实现图片容器内自适应缩放，完整预览需用Bootstrap Modal搭底座并配合JS动态加载、缩放、拖拽等交互，注意tabindex、touch-action、load事件时机及移动端适配。
用 img-fluid 类让图片随容器缩放，但预览不等于展示
响应式图片展示（比如 <img src="x.jpg" class="img-fluid">）只是第一步；预览需要弹层、缩放、拖拽、关闭等交互，Bootstrap 本身不提供完整预览组件。别指望只加个 class 就能点开大图。
-
img-fluid只控制原图在页面内的自适应行为，不影响点击后的行为 - 真正预览要靠 JS 控制 DOM：插入模态框、设置
src、绑定键盘/手势事件 - Bootstrap 5 的
Modal是最轻量的底座，但图片缩放和触控需额外处理
用 Bootstrap Modal 搭建基础预览结构，别漏掉 tabindex="-1"
直接套用 Modal 最省事，但容易忽略两个关键点：一是模态框必须有 tabindex="-1" 才能被 JS 正确聚焦，二是图片容器得设 max-width: 100% 防止溢出。
- 模态框内图片标签必须写成
<img src="" class="img-fluid" alt="">，否则在小屏上可能撑破弹窗 - 如果图片原始尺寸远大于屏幕，加载后会闪一下——建议预设
width和height属性或使用object-fit: contain - 别用
data-bs-toggle="modal"直接绑在缩略图上：它只能传静态href，无法动态换图
<div class="modal fade" id="imageModal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-body p-0">
<img src="" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
用 JavaScript 动态填充图片，注意 dataset 和 load 事件
缩略图得带真实大图地址，推荐用 data-large-src 存路径，而不是塞进 data-bs-target 或 href —— 后者语义不对，还容易被爬虫误抓。
- 监听缩略图点击时，先取
el.dataset.largeSrc，再赋给模态框里的<img>的src - 务必监听新
src的load事件再调用show()，否则 iOS 上常出现白屏 - 别在
show.bs.modal回调里换图：此时模态框已开始动画，图片加载延迟会导致布局跳动 - 移动端双击放大？Bootstrap 不管这事，得自己监听
dblclick并切换transform: scale()
移动端手势支持弱，touchstart/touchmove 得自己补
Bootstrap Modal 默认不响应 touch 事件，滑动关闭、双指缩放都得手写。iOS Safari 对 touch-action: none 很敏感，设错会导致页面卡死或手势失效。
- 图片容器加
style="touch-action: pan-x pan-y;"允许拖拽，但禁止 pinch-zoom（系统级缩放干扰 JS 控制） - 拖拽时实时更新
transform: translate(x, y)，别用left/top——重排开销大，还容易和模态框滚动冲突 - 安卓 WebView 下
touchend可能不触发，建议用pointerup替代 - 别依赖
viewport缩放：现代浏览器禁用了用户缩放，JS 缩放必须靠transform+overflow: hidden
预览功能真正的复杂点不在弹窗本身，而在图片加载时机、触摸坐标归一化、以及不同设备对 transform 渲染的细微差异——这些没法靠一个 class 解决。
