安装 Markdown Preview Enhanced 扩展

找到扩展安装快捷键 Ctrl+Shift+X，搜索 Markdown Preview Enhanced

修改 MPE 全局样式

1. 按 Ctrl+Shift+P，输入并选择 Markdown Preview Enhanced: Customize Css（Global意味着使用vscode打开的所有markdown都使用该CSS文件的设置；Workspace则只是针对当前文档的设置；可自行根据需求选择）
   
2. 此时会打开 style.less 文件，在文件末尾添加以下代码：

.markdown-preview.markdown-preview {
  /* 针对屏幕预览的样式 */
  img {
    display: block;
    margin: 20px auto; /* 上下留白 20px，左右自动居中 */
    width: 65% !important; /* 预览时适中的大小 */
    max-width: 100%;
    height: auto;
  }

  /* 专门针对 PDF 打印/导出的媒体查询 */
  @media print {
    img {
      width: 65% !important; /* PDF 中通常需要调大比例，否则视觉上会显得很小 */
      max-width: 100% !important;
      margin: 10px auto !important;
      page-break-inside: avoid; /* 防止图片被分页截断 */
    }
  }
}

自行根据需求进行缩放（多尝试，找到适合的

导出 PDF 的关键技巧

在 VS Code 中使用 MPE 导出 PDF 时，建议使用 Chrome (Puppeteer) 引擎，它的 CSS 兼容性最好，能完美执行上面的 @media print 代码。

在 Markdown 文件任何位置（建议最顶部）右键。

选择 Chrome (Puppeteer) -> Export to PDF。

如果你发现偏小或者偏大，直接修改上面代码中 @media print 下的 width: 65%

特殊需求缩放：针对少数图片

首先，在之前的style.less中添加以下内容：

/* 在 style.less 中添加 */
.big-img img {
  width: 95% !important;
}

其次，在 Markdown 中针对特定图片这样写：

<div class="big-img">

![这是一张需要大图显示的图片](image-1.png)

</div>

大功告成！希望对你有所帮助！