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