根本原因是弹窗内容区未设宽高约束，导致img按原始尺寸渲染；须为内容容器设max-width、图片加max-width:100%;height:auto;，flex布局下子项加min-width:0，object-fit需配合固定尺寸容器，居中用flex容器控制，加载慢需srcset+sizes响应式适配。
弹窗里图片撑破容器或留白太多
根本原因是弹窗内容区没设宽高约束，而 必须做三件事： 正确做法： 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur 稳解法： 这不是 CSS 问题，是资源选错。弹窗图片常被当成“大图”处理，但用户点开前根本不知道尺寸——结果手机加载 2000w 图，等三秒才显示，还可能因缩放变糊。 必须配
真正卡住人的，从来不是“该写哪行 CSS”，而是没分清：弹窗容器尺寸是否可控、图片是否还在文档流里、以及你到底想解决溢出、变形、居中，还是加载性能——四个问题对应四套技术路径，混用只会让 DevTools 里一堆橙色警告。max-width: 100%，若父容器宽度是 auto（比如未设 width 的
width 或 max-width，比如 max-width: 90vw
max-width: 100%; height: auto;，且不能有内联 width/height 属性覆盖display: flex 布局，确保图片所在项（通常是直接子 min-width: 0，否则 max-width: 100% 在小屏下被忽略
用了 object-fit 却没效果
object-fit 只在容器有**固定尺寸**时才起作用——它不解决“自适应”，只解决“怎么填满那个固定框”。常见误用是只给 object-fit: cover，却忘了给它的父容器同时设 width 和 height（或 aspect-ratio）。
width: 100%; aspect-ratio: 16/9;（推荐，现代浏览器支持好）width: 100%; height: 100%; object-fit: cover; object-position: center;
-webkit-object-fit: cover;；IE 不支持，得 fallback 到 background-image + background-size: cover
object-fit 和 max-width: 100% 混用在同一张图上——前者要固定容器，后者依赖弹性容器，逻辑冲突弹窗图片居中对不齐
margin: 0 auto 在弹窗里基本失效：一是 margin 被接管。水平+垂直居中必须靠容器行为，不是图片自己调。
display: flex; justify-content: center; align-items: center;
min-height: 300px 或 height: 80vh），否则 align-items: center 没参照max-width: 100%; height: auto;，别加 position: absolute 或 float，否则脱离文档流，flex 规则跳过它text-align: center + display: block 更轻量移动端弹窗图片加载慢或模糊
srcset + sizes：
srcset 列物理尺寸源：srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes 描述弹窗内图片占位宽：sizes="(max-width: 768px) 90vw, (max-width: 1200px) 60vw, 50vw"（按你弹窗最大宽度推算）sizes，浏览器默认按 100vw 选图，大概率选大了；写成 50% 而非 50vw，直接失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
