本文介绍一种基于原生 fullscreen api 的轻量级图片放大方案，无需弹窗、不依赖第三方库，兼容 bootstrap 5.3，点击即全屏查看高清图像，再次点击退出全屏。
本文介绍一种基于原生 fullscreen api 的轻量级图片放大方案，无需弹窗、不依赖第三方库，兼容 bootstrap 5.3，点击即全屏查看高清图像，再次点击退出全屏。
在实际开发中，尤其是电商类产品详情页（如您使用的表格折叠区域），常需提供图片放大功能以提升用户体验。但直接修改 width 样式（如 "150%"）往往失效——原因在于：父容器（如 .col-xl）设置了固定布局、overflow-hidden、或受 Bootstrap Flex/Grid 的约束影响，导致缩放样式被截断或未触发重绘。
更可靠、语义清晰且体验更佳的方案是使用浏览器原生的 Fullscreen API。它不依赖 CSS 宽高调整，而是将目标 元素（或其容器）提升至全屏层级，完全脱离当前文档流限制，天然规避了 overflow、max-width、flex 等布局干扰。
✅ 推荐实现方式（适配您的代码）：
<tr>
<td colspan="8" class="collapsible-content hidden">
<div class="container">
<div class="row">
<div class="col-xl p-0 d-flex justify-content-start">
<!-- 移除 overflow-hidden，避免遮挡全屏内容 -->
<a href="javascript:void(0)" id="resizeButton">
<img id="resim" src="img/mandalina.jpg" alt="产品图" class="img-fluid"></a>
</div>
<div class="col-xl col-auto d-flex">
<p style="text-align: start">Lorem ipsum dolor sit amet...</p>
</div>
</div>
</div>
</td>
</tr>
const img = document.getElementById("resim");
const button = document.getElementById("resizeButton");
button.addEventListener("click", function () {
if (document.fullscreenElement) {
// 已处于全屏 → 退出
document.exitFullscreen().catch(e => console.warn("Exit fullscreen failed:", e));
} else {
// 请求全屏（注意：必须作用于 img 元素本身，非 a 标签）
img.requestFullscreen()
.catch(e => console.error("Fullscreen request denied:", e));
}
});
// 可选：监听全屏状态变化，同步 UI（如按钮文字）
document.addEventListener("fullscreenchange", () => {
const isFullscreen = !!document.fullscreenElement;
button.textContent = isFullscreen ? "退出全屏" : "查看大图";
});
? 关键注意事项：
-
必须调用 requestFullscreen() 在
元素上（而非外层 ），否则可能触发失败或仅放大链接区域；
- 全屏 API 是用户手势触发（如 click）才允许的，因此绑定在 click 事件上完全合规；
- 添加 .catch() 处理拒绝情况（如用户禁用全屏、跨 iframe 限制等），避免静默失败；
- 移除 overflow-hidden（已在 HTML 中注释提示），否则全屏后部分浏览器仍可能渲染异常；
- class="img-fluid"（Bootstrap 5）确保图片在非全屏时响应式缩放，与全屏逻辑正交无冲突。
? 进阶建议：若需支持多图轮播或添加关闭按钮，可将 封装进一个 .fullscreen-modal 容器再调用 requestFullscreen()，便于统一控制样式与交互。但对单图场景，直接操作
最简洁高效。
该方案零依赖、零弹窗、零 CSS 动画调试，真正“开箱即用”，同时符合现代 Web 平台规范与无障碍访问原则。
