文章页窄图居中不拉伸——响应式图片的一个小修复

背景

技术站的文章页正文用 .article-content 容器。里面如果插入一张窄图（比如一张截图、一张小尺寸示意图），默认渲染是左对齐的——右侧空出一大片留白。在 PC 宽屏上尤其难看，像是排版没对齐。

需求只有一个：让窄图在正文里居中显示，但保持原始比例不拉伸，同时手机和 PC 都要正常。

决策

选项其实就两个：

方案 A：display: block; margin: 1.5em auto; —— 块级 + 上下外边距 + 左右 auto 居中。图片宽度由自身决定（不拉伸），窄图自然居中。
方案 B：额外写一段媒体查询，手机端 width: 100% 让图片占满、PC 端居中。

我选了 方案 A，理由是：全局已经有一条 img { max-width: 100%; height: auto; } 的规则，意味着任何图片都不会超过容器宽度，手机上窄图本身就会等比缩小、不会溢出。所以根本不需要媒体查询——方案 B 是多余的复杂度。

关键认知：手机端的响应式靠全局 max-width: 100% 已经解决，文章页只补“PC 端居中”这一件事就够了。

修复

在 src/styles/global.css 的 .article-content img 里加上：

.article-content img {
  display: block;
  max-width: 100%;   /* 沿用全局，手机不溢出 */
  height: auto;      /* 保持比例，不拉伸 */
  margin: 1.5em auto; /* 上下留白 + 左右居中 */
  border-radius: var(--radius);
}

display: block 是 margin: auto 水平居中的前提（inline 元素 margin auto 不生效）。height: auto 保证窄图不会被拉满容器宽度——它保持自己的尺寸，只是位置居中。

为什么不加媒体查询

加了反而引入两个问题：

重复规则：全局 img 已处理手机端等比，媒体查询里的 width: 100% 是重复且可能和它打架。
维护负担：以后每调一处图片样式都要想“手机端怎样、PC 端怎样”，而实际上一条 max-width: 100% 早已覆盖手机。

小步快跑，只改必要的一行，比“看起来更完整”的媒体查询更稳。

验证

PC 宽屏：窄图居中，两侧留白对称。
手机（窄视口）：窄图等比缩小，不溢出、不模糊。
宽图：仍是 max-width: 100% 限制下满宽，不受影响。

构建通过，已上线。