真正稳的起点是max-width: 100%+height: auto，需配合父容器有可参照宽度、清除内联宽高属性、Flex/Grid中图片加min-width: 0，否则易因参照缺失、默认min-width: auto或内联属性覆盖而失效。
移动端图片不拉伸、不溢出、不塌陷，只靠 width: 100% 是不够的；真正稳的起点是 max-width: 100% + height: auto，且必须配合父容器可参照宽度和关键兜底声明。
为什么 width: 100% + height: auto 在移动端经常失效
这不是写法错，而是浏览器计算逻辑被现实场景卡住了：
- 父容器没设宽（比如只写了
display: flex却没给它或它的祖先设width或max-width），width: 100%就失去参照，直接退化为原始尺寸 - Flex 子项默认
min-width: auto，会“扛住”原始宽度，让width: 100%彻底无效——尤其在小屏横竖切换时明显 - 图片带内联
width="600"属性，会覆盖height: auto，导致高度锁死，缩放失衡 - iOS Safari（尤其旧版）对
position: absolute或display: table-cell中的height: auto解析为0，图片塌成一条线
max-width: 100% + height: auto 的正确用法
这是目前兼容性最好、行为最可预期的组合，但需满足三个前提：
- 父容器必须有明确宽度来源：可以是
width: 100%、max-width: 1200px，或通过flex-basis/grid-column等间接提供 - 显式清除内联宽高：用 JS 移除或服务端渲染时避免输出
width/height属性，否则 CSS 无法接管缩放 - Flex/Grid 容器中，必须在图片自身加
min-width: 0（不是父项），才能覆盖默认的min-width: auto，否则它拒绝收缩 - 移动端居中只需父容器设
text-align: center——img是 inline 元素，这个属性天然生效，比 flex 更轻量、更兼容
什么时候必须用 object-fit
仅当容器尺寸已固定（如卡片头像 80px × 80px、网格项 200px × 150px），且你要求任意比例图片填满又不失真时才需要：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover：等比缩放后裁剪，填满——适合封面图、头像，必须配width和height，缺一不可 -
object-fit: contain：等比缩放后留白，完整显示——适合产品图、图表，同样依赖显式容器尺寸 - 老版 iOS Safari 需加
-webkit-object-fit: cover前缀；IE 完全不支持，fallback 只能改用background-image，但会丢alt和 SEO - 别在普通流式布局里滥用
object-fit：没有固定宽高的容器上它完全不触发，纯属无效代码
srcset 和 sizes 漏掉一个就白配
CSS 控制怎么显示，srcset+sizes 才决定加载哪张图。漏掉 sizes，手机可能加载 2MB 的桌面图，用户等三秒白屏还查不出问题：
-
srcset列的是源图固有宽度，单位是w（如"photo-800.jpg 800w"），不是显示宽度 -
sizes必须和 CSS 中该图片容器的**实际占位宽度逻辑一致**：比如小屏占满视口 →(max-width: 480px) 100vw，中屏占半宽 →(max-width: 768px) 50vw - 只写
srcset不写sizes，浏览器默认按100vw选图，大概率选大了；把50vw错写成50%，选图逻辑直接崩坏 - 开发时用 Chrome DevTools → Network → Filter “Large resources”，看加载的是否真是对应分辨率的图
真正难的从来不是写那两行 CSS，而是判断当前图片所处的上下文：它在不在 Flex 里？父容器有没有宽？要不要适配 iPad 横屏？有没有内联属性干扰？这些细节不逐个确认，max-width: 100% 就只是看起来很美的一行代码。
