本文介绍如何利用原生 JavaScript 的 requestFullscreen() 方法，实现点击图片后全屏显示，避免传统缩放方式导致的布局溢出或样式失效问题，特别适用于 Bootstrap 表格内的产品详情页场景。

本文介绍如何利用原生 javascript 的 `requestfullscreen()` 方法，实现点击图片后全屏显示，避免传统缩放方式导致的布局溢出或样式失效问题，特别适用于 bootstrap 表格内的产品详情页场景。

在 Bootstrap 5.3 的响应式表格中嵌入可交互图片时，直接修改 img.style.width（如设为 "150%"）常因父容器限制（如 overflow-hidden、col-xl 的 flex 约束或 table cell 的渲染机制）而无法生效——图片看似“放大”，实则被裁剪或未突破容器边界。此时，绕过 CSS 缩放、转向浏览器原生全屏 API，是更可靠、语义清晰且无需额外 CSS 修复的解决方案。

✅ 推荐方案：使用 requestFullscreen()

将图片点击事件改为触发原生全屏模式，既规避了宽度计算与父容器冲突问题，又提供沉浸式查看体验。只需极简 JS 代码：

document.getElementById("resizeButton").addEventListener("click", function (e) {
  e.preventDefault(); // 阻止 <a> 标签默认跳转
  const img = document.getElementById("resim");
  if (img.requestFullscreen) {
    img.requestFullscreen();
  } else if (img.webkitRequestFullscreen) { // Safari
    img.webkitRequestFullscreen();
  } else if (img.msRequestFullscreen) { // IE11
    img.msRequestFullscreen();
  }
});</a>

? 注意：requestFullscreen() 必须由用户手势（如 click）触发，且目标元素需为可全屏元素（ 默认支持）。无需设置 z-index 或修改 width/max-width，浏览器会自动铺满视口。

? 常见误区与修复

• ❌ 错误做法：仅改 img.style.width → 受限于 col-xl 的 flex 容器和 overflow-hidden，宽度值被忽略；
• ❌ 错误做法：给 或
  添加 z-index → 全屏与层叠无关，而是 DOM 渲染层级切换；
• ✅ 正确前提：确保图片路径有效、id="resim" 唯一、事件监听在 DOM 加载完成后绑定（建议包裹在 DOMContentLoaded 中）。

? 可选增强：退出全屏回调

如需在退出全屏时执行操作（例如恢复按钮文本），可监听 fullscreenchange 事件：

document.addEventListener("fullscreenchange", () => {
  if (!document.fullscreenElement) {
    console.log("已退出全屏");
    // 可在此恢复 UI 状态
  }
});

该方法兼容所有现代浏览器（Chrome、Firefox、Edge、Safari ≥ 10），无需引入第三方库，轻量、标准、零样式侵入，是 Bootstrap 表格内图片放大的最佳实践。