图片显示不全的根源在于CSS未正确约束尺寸或容器上下文缺失；必须同时设置max-width: 100%和height: auto，缺一不可，且在Flex/Grid中需额外加min-width: 0以防止原始尺寸撑破布局。
图片显示不全，不是图没加载完，而是 CSS 没压住原始尺寸或容器没给对上下文 —— max-width: 100% 和 height: auto 必须同时出现，缺一不可。
为什么 width: 100% 会失效？
单独写 width: 100% 在多数场景下根本不起作用，尤其当父容器是 display: flex 或 display: grid 时：
- img 是替换元素，默认有
min-width: auto，flex 项会优先守着原始宽度，width: 100%被无视 - HTML 标签里写了
width="600" height="400"这类内联属性，会直接覆盖height: auto，高度卡死 - 在
position: absolute或 IE9–11 的display: table-cell中，height: auto可能被算成 0，图片塌成一条线
正确起点永远是：max-width: 100%; height: auto; min-width: 0; —— 第三句专治 flex 场景下的“撑开”问题。
object-fit 什么时候必须上？
当你已经给图片容器设了固定尺寸（比如头像框 width: 80px; height: 80px），又想让任意比例的图片填满且不失真，object-fit 就是唯一干净解法：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放后裁剪，填满容器 → 适合封面、头像 -
object-fit: contain：等比缩放后留白，完整显示 → 适合产品图、图表、带文字的截图 - 必须配合显式宽高（
width和height都得有），否则无效 - iOS Safari 旧版需加
-webkit-object-fit: cover；IE 全系不支持，fallback 只能用background-image+background-size，但会丢alt和 SEO
Flex/Grid 容器里图片把布局撑爆了
这不是 bug，是浏览器对 img 的默认行为：它扛着原始像素尺寸进 flex/grid，不肯收缩。常见于响应式断点切换后，卡片突然变高、文字被顶跑。
- 通用解法：
img { max-width: 100%; height: auto; min-width: 0; } - 别依赖
flex-shrink: 1，对 img 效果极不稳定 - 如果容器本身也要保持比例（如 16:9），优先用
aspect-ratio: 16/9，比老式padding-top: 56.25%更可靠 - 确保父容器没写死
min-height或漏掉overflow: hidden，否则撑出滚动条还误以为是图片问题
响应式图片只靠 CSS 缩放远远不够
CSS 控制“怎么显示”，srcset + sizes 才控制“加载哪张图”。漏掉后者，小屏加载 2MB 大图，高清屏却用 1x 图发虚。
-
srcset列的是源图固有宽度，单位是w（如"small.jpg 480w"） -
sizes必须和该图片在 CSS 中的**实际显示宽度逻辑一致**，例如：sizes="(max-width: 768px) 100vw, 50vw" - 测试时打开 Chrome DevTools → Network → Filter “Large resources”，确认加载的是合适尺寸的图，而不是靠肉眼判断
- 本地双击打开 HTML（
file://协议）时，Chrome/Firefox 会拦截图片请求 → 改用python3 -m http.server启本地服务再测
真正容易被忽略的点是：图片是否完整显示，从来不只是 CSS 问题，而是 srcset 是否匹配真实渲染宽度、容器是否清除了内联宽高、以及 min-width: 0 是否覆盖了 flex 默认行为 —— 这三者少一个，就可能在某个设备上突然“不全”。
