直接写 img { max-width: 100%; height: auto; } 能解决80%自适应需求，但需父容器有明确宽度、无内联宽高、非未约束的Flex/Grid容器，否则因缺乏可计算参照而静默失效。
直接写 img { max-width: 100%; height: auto; } 能解决 80% 的自适应需求，但只要父容器没宽度、图片带内联 width/height、或用了 Flex/Grid，它就大概率静默失效——这不是你 CSS 写错了，是浏览器根本没拿到可计算的参照。
为什么 max-width: 100% 经常不生效
这行样式本身没问题，但它依赖父容器提供“可测量的宽度”。浏览器执行 max-width: 100% 时，会逐级向上找第一个有明确宽度（width、max-width、或 flex/grid 轨道约束）的祖先。常见断点：
- 父
<div> 是空的，或只写了 <code>display: flex却没设width、min-height或flex-basis -
<img style="max-width:90%" style="max-width:90%" alt="HTML自适应图片样式设置步骤详解" >这类内联属性强制锁定尺寸，直接覆盖height: auto - 在
display: flex容器里，作为子项默认带
min-width: auto，阻止它收缩——哪怕你写了max-width: 100%也无效 - 全局 CSS（如 Bootstrap）设置了
img { max-width: none; }，你的规则被层叠覆盖 - 容器必须同时有明确的
width和height（或用aspect-ratio: 16/9+width: 100%） -
object-fit: cover：等比缩放+裁剪，适合封面图；加object-position: top可控制裁剪起点 -
object-fit: contain：等比缩放+完整显示，留白是设计结果，不是 bug - 老版 iOS Safari 需加
-webkit-object-fit；IE 完全不支持，fallback 只能用background-image，但会丢失alt和 SEO - 别在
object-fit容器里再写max-width: 100%，它和固定宽高冲突，可能引发渲染异常 - 父容器必须设
display: flex（只给<img alt="HTML自适应图片样式设置步骤详解" >加没用） - 父容器要有明确高度，比如
min-height: 300px或height: 100vh；否则align-items: center失去垂直参照 - 图片不能脱离文档流：删掉
position: absolute、float，或确保它没被包在display: inline-block容器里 - 图片自身仍需
max-width: 100%; height: auto;，否则在窄屏下可能溢出或拉伸 - 如果父容器是 Flex 子项，还需给该子项加
min-width: 0（不是加在<img alt="HTML自适应图片样式设置步骤详解" >上），否则默认的min-width: auto会锁死图片宽度 -
srcset列的是图片源的**固有宽度**（单位w），例如"photo-800.jpg 800w" -
sizes必须和 CSS 中该图片所在容器的**实际占位宽度逻辑一致**，比如小屏占满视口、中屏占一半：sizes="(max-width: 768px) 100vw, 50vw" - 漏掉
sizes，浏览器默认按100vw选图，大概率选大了；写错sizes（比如把50vw写成50%），选图完全失准 - 开发时用 Chrome DevTools → Network → Filter → “Large resources” 查看是否真加载了合适尺寸的图
object-fit 必须配固定容器尺寸才起作用
object-fit 不是“让图片自适应”，而是“让图片按指定框裁剪或缩放填充”。它对容器有硬性要求：
Flex 容器中图片居中且自适应的三要素
只写 justify-content: center + align-items: center 没反应？问题几乎全出在这三点上：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
srcset 和 sizes 不是可选项，是上线必填项
max-width: 100% 解决“怎么画”，srcset+sizes 解决“加载哪张”。不配它们，小屏用户会强行下载 4K 图，白屏三秒你还查不出原因：
真正卡住人的从来不是某一行 CSS，而是你没意识到：图片是否缩放，取决于父容器有没有宽度；是否居中，取决于容器有没有高度和文档流完整性；是否加载合理，取决于 sizes 是否真实反映了它在布局中的占位逻辑——这些细节一漏，整套响应式就变成玄学。
