img { max-width: 100%; height: auto; } 能解决绝大多数场景，但需父容器有明确宽度参照、Flex/Grid 子项加 min-width: 0、清除内联宽高属性、配全 srcset/sizes，缺一则失效。
img { max-width: 100%; height: auto; } 能解决绝大多数场景，但不是写上就完事——它实际生效，取决于父容器有没有“可参照的宽度”，以及布局上下文是否允许收缩。
为什么 max-width: 100% 有时完全不缩放
这不是 CSS 写错了，而是浏览器找不到计算基准。max-width: 100% 的“100%”永远指向**最近一个有明确宽度的祖先元素**。
- 父
<div> 只写了 <code>display: flex却没设width、max-width或flex-basis，那图片就无宽可依 - 父容器是 Flex 子项，默认
min-width: auto，会锁死最小宽度，导致max-width: 100%被忽略（尤其小屏下） -
<img style="max-width:90%" style="max-width:90%" alt="HTML如何让图片自适应屏幕宽度" >这类内联属性会直接覆盖height: auto，强制固定尺寸 - 某些 UI 框架（如 Bootstrap 4+）全局重置了
img { max-width: none; }，你的规则被后加载的 CSS 覆盖 - 给图片加
align-self: center+height: auto，能改善垂直对齐，但不解决撑开问题 - 必须在**图片的直接父元素**（即那个 Flex 子项或 Grid 子项）上加
min-width: 0—— 这才是让max-width: 100%生效的前提 - Grid 布局中，避免用
minmax(400px, 1fr)这类写法定义列轨道；若需弹性，优先用1fr或minmax(0, 1fr) - 不要给图片加
flex-shrink: 0，除非你明确要它“永不压缩”（比如 logo 图标） -
srcset列的是图片源的**固有宽度**，单位是w，例如"photo-400.jpg 400w, photo-800.jpg 800w" -
sizes必须和 CSS 中该图片**实际占位宽度逻辑一致**，比如容器在小屏占满视口、中屏占半宽，就得写sizes="(max-width: 768px) 100vw, 50vw" - 漏掉
sizes，浏览器默认按100vw选图，几乎必然选大；把50vw错写成50%，选图逻辑彻底失效 - 老 iOS Safari 需补
-webkit-object-fit，IE 不支持object-fit，fallback 方案只能用background-image，但会丢失alt和 SEO
Flex/Grid 容器里图片撑开父项怎么办
关键不是调图片，而是控制容器项的行为。Flex/Grid 中图片默认“拒绝收缩”，哪怕你写了 max-width: 100%。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
srcset 和 sizes 不是可选项，是上线必填项
max-width: 100% 只管“怎么画”，不管“加载哪张”。不配 srcset + sizes，手机用户大概率加载 4K 图却只显示 375px 宽，白耗流量和时间。
立即学习“前端免费学习笔记（深入）”；
真正卡住人的从来不是那两行 CSS，而是父容器是否提供宽度参照、Flex 子项是否显式放开收缩、sizes 是否与真实布局宽度严格对应——这些点错一个，自适应就变成“看起来像自适应”。
