max-width: 100% + height: auto 生效需三个前提：父容器有可计算宽度、图片无内联宽高属性、Flex容器需设min-width: 0；object-fit需容器明确宽高；sizes须精准匹配实际渲染宽度；居中应通过flex容器实现而非直接设图片margin。
max-width: 100% + height: auto 是起点，不是终点——它只在父容器有宽度、图片没被内联属性锁死、布局模式允许收缩时才真正生效。
为什么 max-width: 100% + height: auto 有时完全没反应
这组规则依赖三个隐性前提，缺一即失效：
- 父容器必须有可计算宽度：空
<div>、仅设 <code>display: flex但没给width或max-width，100%就失去参照 - 图片不能带内联
width/height属性：<img src="a.jpg" style="max-width:90%" style="max-width:90%" alt="HTML响应式网页图片自适应教程" >会直接覆盖height: auto - Flex 容器中默认
min-width: auto阻止图片收缩，需显式加min-width: 0 - 全局 CSS（如 Bootstrap）可能写了
img { max-width: none; }，用 DevTools 的 Computed 面板能立刻确认是否被覆盖 - 必须同时设置容器的
width和height（或用aspect-ratio: 16/9），单独设height: 200px在<img alt="HTML响应式网页图片自适应教程" >上只会拉伸变形 -
object-fit: cover等比缩放+裁剪，适合封面图；配合object-position: top可控裁剪起点 -
object-fit: contain等比缩放+完整显示，留白是设计结果，不是 bug - 旧版 iOS Safari 需加
-webkit-object-fit；IE 完全不支持，fallback 只能换用background-image，但会丢alt和 SEO - 如果图片真实渲染宽度是
calc(100vw - 32px)（左右边距各 16px），但sizes还写"100vw"，小屏会加载几 MB 的大图 - 打开 DevTools → Elements → 选中
<img alt="HTML响应式网页图片自适应教程" >→ Computed 面板看实际width值，在每个断点下记下数字，再换算成vw填进sizes - 媒体条件顺序必须和 CSS 媒体查询严格一致：
(max-width: 768px)不能写成767px或769px；兜底值必须存在且无条件，比如"33vw" -
srcset混用w和x描述符（如"a.jpg 400w, b.jpg 2x"）会导致整个srcset被忽略，降级回src -
margin: 0 auto要求图片是display: block且有**可计算宽度**；一旦用了max-width: 100%，浏览器就不再认为它有固定宽度，margin自动失效 - 真正可靠的是父容器用
display: flex：justify-content: center+align-items: center，但容器必须有明确高度（如height: 100vh或min-height: 300px） -
text-align: center只对父容器有效，且仅水平方向；若图片被设为display: block，就得换用margin: 0 auto并确保宽度可控
object-fit 不是“让图片自适应”，而是“让图片填进固定框”
它只在容器有明确宽高时起作用，和 max-width: 100% 解决的是不同问题：
sizes 写错，srcset 就白配
浏览器只信 sizes 声明的宽度，完全不看 CSS 渲染结果：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
居中不是给图片加样式，而是控制容器提供居中上下文
直接对 <img alt="HTML响应式网页图片自适应教程" > 设 margin: 0 auto 或 text-align: center 几乎总失败：
最常被忽略的其实是问题归因：图片溢出？是布局还是加载问题？拉伸变形？是宽高属性冲突还是 object-fit 缺失？模糊？是 sizes 错配还是 DPR 未覆盖？混用方案会让调试路径变长，不如先盯住一个现象，用 DevTools 看清 computed width / height / object-fit / srcset 选中结果，再动手改。
