本文介绍如何利用原生 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();
}
});? 注意：requestFullscreen() 必须由用户手势（如 click）触发，且目标元素需为可全屏元素（<img> 默认支持）。无需设置 z-index 或修改 width/max-width，浏览器会自动铺满视口。
? 常见误区与修复
- ❌ 错误做法：仅改 img.style.width → 受限于 col-xl 的 flex 容器和 overflow-hidden，宽度值被忽略；
- ❌ 错误做法：给 <a> 或 <div> 添加 z-index → 全屏与层叠无关，而是 DOM 渲染层级切换；
- ✅ 正确前提：确保图片路径有效、id="resim" 唯一、事件监听在 DOM 加载完成后绑定（建议包裹在 DOMContentLoaded 中）。
? 可选增强：退出全屏回调
如需在退出全屏时执行操作（例如恢复按钮文本），可监听 fullscreenchange 事件：
document.addEventListener("fullscreenchange", () => {
if (!document.fullscreenElement) {
console.log("已退出全屏");
// 可在此恢复 UI 状态
}
});该方法兼容所有现代浏览器（Chrome、Firefox、Edge、Safari ≥ 10），无需引入第三方库，轻量、标准、零样式侵入，是 Bootstrap 表格内图片放大的最佳实践。
