博客中仅用 img { max-width: 100%; height: auto; } 不够，需约束容器宽度、重置内联宽高、修复 Flex/Grid 中 min-width 问题，并强制配置 object-fit 和 srcset。
直接用 img { max-width: 100%; height: auto; } 不够——博客里图片来源杂、嵌套深、常混排文字或卡片，必须加约束层级和 fallback 规则才能真正统一。
为什么博客里 max-width: 100% 经常失效
博客模板中图片常嵌在 <article></article>、<section></section> 或富文本编辑器输出的 <div> 里，这些容器往往没设宽、或用了 Flex/Grid 却忘了关 <code>min-width: auto。结果就是：max-width: 100% 找不到参照宽度，图片照常溢出。
- 富文本插入的
<img style="max-width:90%" style="max-width:90%" alt="HTML博客模板怎么统一图片自适应展示规范" >会强制覆盖height: auto，拉伸变形 - Markdown 渲染后生成的图片包裹层（如
<p><img alt="HTML博客模板怎么统一图片自适应展示规范" ></p>）默认是块级，但父<p></p>没设max-width，图片就撑破整行 - 侧边栏图文卡片用
display: flex布局时，<img alt="HTML博客模板怎么统一图片自适应展示规范" >默认flex-shrink: 1失效，仍按原始尺寸占位
统一规范要锁死三个地方
不是只写一条 CSS 就完事。博客模板需在全局样式中明确控制：容器宽度基准、图片行为、以及响应式加载策略。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 给所有内容区容器（如
.post-content、article）加max-width: 768px; margin: 0 auto;，为max-width: 100%提供稳定参照 - 重置所有
<img alt="HTML博客模板怎么统一图片自适应展示规范" >的内联宽高：img[width], img[height] { width: auto !important; height: auto !important; }，防止 CMS 或编辑器注入破坏 - 对 Flex/Grid 中的图片，不改
<img alt="HTML博客模板怎么统一图片自适应展示规范" >，而是给其父项（如卡片<div class="card">）加 <code>min-width: 0;，否则max-width彻底被忽略object-fit和srcset不是可选项，是上线必配博客封面图、头像、图解类插图，如果只靠 CSS 缩放，小屏用户会下载 3MB 原图再压成 300px 宽——这是真实带宽浪费，且老 iOS Safari 会模糊。
- 固定尺寸容器（如封面图区块）必须用
object-fit: cover;，但前提是容器已设width和height（或aspect-ratio），否则无效 - 每张
<img alt="HTML博客模板怎么统一图片自适应展示规范" >都应带srcset和sizes：<img src="photo-480.jpg" srcset="photo-480.jpg 480w, photo-800.jpg 800w, photo-1200.jpg 1200w" sizes="(max-width: 768px) 100vw, 700px" alt="HTML博客模板怎么统一图片自适应展示规范" > -
sizes值必须和实际 CSS 中该图片所在容器的显示宽度一致；写错（比如把700px写成70%）会导致浏览器永远选最大图
最后检查点：别让框架或插件悄悄覆盖你
很多博客基于 Hugo、Jekyll 或 WordPress 主题，它们常自带全局
img { max-width: none; }或给图片加了display: block同时又设了width: 100%，导致height: auto失效。最稳妥做法是：- 用 Chrome DevTools 的 Computed 面板查
<img alt="HTML博客模板怎么统一图片自适应展示规范" >最终生效的width和height，确认没被覆盖 - 在自定义 CSS 开头加
@layer base { ... }（如支持）或用!important锁定关键规则，但仅限max-width、height、min-width这几处 - 对无法修改源码的第三方组件（如评论区 avatar），用
iframe或伪元素包裹再设样式，避免污染主样式流
- 固定尺寸容器（如封面图区块）必须用
