博客中仅用 img { max-width: 100%; height: auto; } 不够，需约束容器宽度、重置内联宽高、修复 Flex/Grid 中 min-width 问题，并强制配置 object-fit 和 srcset。

直接用 img { max-width: 100%; height: auto; } 不够——博客里图片来源杂、嵌套深、常混排文字或卡片，必须加约束层级和 fallback 规则才能真正统一。

为什么博客里 max-width: 100% 经常失效

博客模板中图片常嵌在

、

或富文本编辑器输出的

里，这些容器往往没设宽、或用了 Flex/Grid 却忘了关 min-width: auto。结果就是：max-width: 100% 找不到参照宽度，图片照常溢出。

• 富文本插入的 会强制覆盖 height: auto，拉伸变形
• Markdown 渲染后生成的图片包裹层（如
  ）默认是块级，但父
  没设 max-width，图片就撑破整行
• 侧边栏图文卡片用 display: flex 布局时， 默认 flex-shrink: 1 失效，仍按原始尺寸占位

统一规范要锁死三个地方

不是只写一条 CSS 就完事。博客模板需在全局样式中明确控制：容器宽度基准、图片行为、以及响应式加载策略。

DeepBI DHTML 页面生成器

生成可在 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[width], img[height] { width: auto !important; height: auto !important; }，防止 CMS 或编辑器注入破坏
• 对 Flex/Grid 中的图片，不改 ，而是给其父项（如卡片
  ）加 min-width: 0;，否则 max-width 彻底被忽略

  object-fit 和 srcset 不是可选项，是上线必配

  博客封面图、头像、图解类插图，如果只靠 CSS 缩放，小屏用户会下载 3MB 原图再压成 300px 宽——这是真实带宽浪费，且老 iOS Safari 会模糊。

  • 固定尺寸容器（如封面图区块）必须用 object-fit: cover;，但前提是容器已设 width 和 height（或 aspect-ratio），否则无效
  • 每张 都应带 srcset 和 sizes：
  • sizes 值必须和实际 CSS 中该图片所在容器的显示宽度一致；写错（比如把 700px 写成 70%）会导致浏览器永远选最大图

  最后检查点：别让框架或插件悄悄覆盖你

  很多博客基于 Hugo、Jekyll 或 WordPress 主题，它们常自带全局 img { max-width: none; } 或给图片加了 display: block 同时又设了 width: 100%，导致 height: auto 失效。最稳妥做法是：

  • 用 Chrome DevTools 的 Computed 面板查 最终生效的 width 和 height，确认没被覆盖
  • 在自定义 CSS 开头加 @layer base { ... }（如支持）或用 !important 锁定关键规则，但仅限 max-width、height、min-width 这几处
  • 对无法修改源码的第三方组件（如评论区 avatar），用 iframe 或伪元素包裹再设样式，避免污染主样式流

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！