The ‘Download’ and Remove Image’ buttons move beyond the visible area in full-screen mode at high image resolutions.

问题场景

在 Gradio 中使用 gr.Image 组件（或基于其的 gr.Interface）时，用户点击图片进入 full‑screen 模式；若图片原始分辨率较高（如几千像素），位于右上角的控制按钮（“Download”“Remove Image”）位置会异常偏移，部分或全部超出浏览器可视区域，且通常被滚动条遮挡，导致无法操作。

报错原文

The 'Download' and Remove Image' buttons move beyond the visible area in full-screen mode at high image resolutions.

原因分析

可能原因：Gradio 全屏模式下图片容器的 CSS 布局未对极高分辨率图片做自适应处理，按钮的 position 或 overflow 规则在图片尺寸超过视口时失效，导致按钮溢出容器边距或隐藏于滚动条后方。该问题由 Gradio 前端组件样式缺陷引起，非用户代码错误。

环境排查

• 确认 Gradio 版本（报告用户为 5.47.2，更早版本也可能存在）；
• 确认操作系统和浏览器类型（暂仅 Windows 环境报告）；
• 确认触发问题的图片分辨率（一般为 2000px 以上长宽）；
• 检查浏览器是否存在自定义缩放或滚动条设置。

解决步骤

1. 临时方法一（降低图片分辨率）：在 Python 端预处理输入图片，将宽度或高度缩放到 2000px 以内再传入 gr.Image，观察全屏模式下按钮是否恢复可见。
2. 临时方法二（调整浏览器缩放）：在全屏模式下按 Ctrl + -（缩小）或 Ctrl + 滚轮，使图片缩小至按钮出现在可见区域内。
3. 检查浏览器滚动条：确认系统滚动条是否处于“始终显示”模式（Windows 设置 → 辅助功能 → 始终显示滚动条），若为“自动隐藏”则按钮被遮挡问题更轻。
4. 等待 Gradio 修复：关注 Gradio 官方发布说明，升级到包含布局修正的版本（当前 5.47.2 仍未修复）。

验证方法

全屏打开一张高分辨率图片（建议 4000×3000 或更高），观察右上角 “Download” 和 “Remove Image” 按钮是否完整可见且可点击。若按钮被遮挡，则问题仍存在；若通过上述临时方法可恢复，则视为成功绕过。

参考来源

gradio-app/gradio #11982

AI 工具推荐

想把多个 AI 模型放在一个入口？

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型，适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接：通过此链接购买，我可能获得佣金，不影响你的价格。