最稳方案是手动触发Bootstrap Modal：为图片添加data-large-src属性，用原生JS监听点击事件，动态设置modal内图片src后调用bootstrap.Modal.show()，并配合max-width/max-height和object-fit:contain实现自适应缩放。
用 bootstrap-modal 手动触发最稳
bootstrap 本身不提供「点击图片自动放大」的内置组件，得靠 modal + 手动绑定事件实现。别指望 data-toggle="modal" 直接套在 <img> 上就完事——它只认按钮或链接，对图片默认没响应。
常见错误是直接给 <img> 加 data-target 和 data-toggle，结果点不动。原因：Bootstrap 的 modal 初始化逻辑会跳过非交互元素（如 <img>），除非显式调用 modal('show')。
- 把大图路径存在
data-large-src属性里，比如<img src="thumb.jpg" data-large-src="full.jpg"> - 用
$(img).on('click', ...)拿到路径后，动态填进 modal 的<img>里 - 确保 modal HTML 已存在 DOM 中（不能靠 JS 动态生成再 show，容易出兼容问题）
modal 内部 <img> 的尺寸和加载要自己兜底
Modal 弹出来时，如果大图还没加载完，会出现空白或错位；Bootstrap 不管图片加载状态，也不自动适配宽高。用户常遇到弹窗里图片撑爆容器、或者高度为 0 的情况。
关键不是写死 width，而是让图片按比例缩放并居中。CSS 上至少加这三行：
.modal-body img {
max-width: 90vw;
max-height: 80vh;
object-fit: contain;
}
-
max-width/max-height用视口单位（vw/vh），避免在小屏上溢出 - 必须设
object-fit: contain，否则拉伸变形；cover会裁剪，不适合预览场景 - 别依赖
img { width: 100% }，它会让图片失真，尤其原始比例和 modal 不一致时
移动端点击区域太小，得加 cursor: pointer 和 touch-action
在 iOS 或安卓上，纯 <img> 元素点击反馈弱，有时要点两下才触发，甚至被浏览器当长按保存处理。这不是 bug，是移动端对非可点击元素的默认策略。
- 给图片加
style="cursor: pointer; touch-action: manipulation;" -
touch-action: manipulation能禁用双指缩放、滚动干扰，让单击更灵敏 - 如果项目用了 Bootstrap 5，确认没全局禁用
pointer-events（比如某些工具类如pe-none）
不用 jQuery？bootstrap@5.3+ 的 JS API 写法更干净
Bootstrap 5 默认弃用 jQuery，但文档里 modal 示例还混着 jQuery 写法，容易误导。原生 JS 调用其实就三步：找 modal 实例、设内容、调 show()。
示例代码（假设 modal ID 是 imageModal）：
document.querySelectorAll('img[data-large-src]').forEach(img => {
img.addEventListener('click', () => {
const largeSrc = img.dataset.largeSrc;
const modalImg = document.querySelector('#imageModal img');
modalImg.src = largeSrc;
const myModal = new bootstrap.Modal(document.getElementById('imageModal'));
myModal.show();
});
});
- 每次点击都新建
Modal实例没问题，Bootstrap 会复用已初始化的实例 - 务必等
modalImg.src赋值后再show()，否则可能闪白屏 - 如果页面有多个图片，别用
id做唯一标识——用data-属性传参更可靠
object-fit 在老版 Android WebView 里支持差，真要兼容 4.4，得加 polyfill 或降级用 background-image。 
