img { max-width: 100%; height: auto; } 是最简有效起点，但失效主因是父容器无宽、内联宽高锁定或 Flex/Grid 中 min-width: auto 阻止收缩，需配合 min-width: 0、清除内联属性及正确使用 object-fit 或 srcset/sizes。

img { max-width: 100%; height: auto; } 是最简且有效的起点，但它不是“写了就完事”的万能规则——实际失效时，90% 的问题出在父容器、内联属性或布局上下文上，而不是这行 CSS 本身。

为什么 max-width: 100% + height: auto 有时不生效

这组样式依赖三个隐性条件：父容器有可计算宽度、图片未被内联宽高锁定、当前布局允许收缩。常见卡点包括：

• 父 <div> 只写了 <code>display: flex 却没设 width 或 max-width，导致 100% 失去参照
• <img style="max-width:90%" style="max-width:90%" alt="HTML自适应图片怎么做？完整制作步骤一览" > 这类内联属性会直接覆盖 height: auto，高度被锁死
• 在 display: flex 容器中，<img alt="HTML自适应图片怎么做？完整制作步骤一览" > 默认带 min-width: auto，阻止它随屏幕变窄而缩小
• 外部 CSS 框架（如 Bootstrap）全局重置了 img { max-width: none; }，你的样式被顶掉

object-fit 在固定尺寸容器里怎么用才起效

object-fit 不是“让图片自适应”，而是“让图片按指定框裁剪或缩放”。它只在容器有明确宽高时触发：

• 必须同时设置容器的 width 和 height（或用 aspect-ratio: 16/9）
• object-fit: cover：等比缩放后裁剪填满，适合封面图；可加 object-position: top 控制裁剪起点
• object-fit: contain：等比缩放后完整显示，留白是设计结果，不是 bug
• 老版 iOS Safari 需加 -webkit-object-fit；IE 完全不支持，fallback 只能用 background-image，但会丢失 alt 和 SEO

Flex/Grid 容器中图片撑开布局怎么办

这不是 bug，是浏览器对替换元素的默认行为。解法重点不在图片本身，而在控制其所在容器项的收缩能力：


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载

立即学习“前端免费学习笔记（深入）”；

• 给图片加 max-width: 100%; height: auto; align-self: center;
• 关键一步：给图片的**父 flex/grid 项**加 min-width: 0;（不是加在 <img alt="HTML自适应图片怎么做？完整制作步骤一览" > 上）
• 避免用 flex-shrink: 1 强制压缩图片，效果不稳定；align-self: center 可辅助垂直居中
• 若容器需等比占位（如卡片头像），优先用 aspect-ratio: 1/1，比旧式 padding-top: 100% 更简洁可靠

要不要配 srcset 和 sizes？

只做视觉缩放，不用；但只要上线，就必须配——否则小屏加载 2MB 大图，用户等三秒白屏，你还不知道问题在哪。

• srcset 列的是源图固有宽度（单位 w），如 "photo-480.jpg 480w, photo-1200.jpg 1200w"
• sizes 必须和 CSS 中该图片容器的**实际显示宽度逻辑一致**，例如 sizes="(max-width: 768px) 100vw, 50vw"
• 漏掉 sizes，浏览器默认按 100vw 选图，大概率选大了；写错（比如把 50vw 写成 50%），选图完全失准
• 开发时用 Chrome DevTools → Network → Filter “Large resources” 查看是否真加载了合适尺寸的图

真正难的不是写哪一行 CSS，而是判断当前场景到底要解决什么：是图片溢出？拉伸变形？加载太慢？还是高清屏模糊？每个问题背后对应的技术路径完全不同，混用反而会让问题更难定位。