Ctrl+滚轮在 Markdown 预览中无效需先聚焦预览区域并启用 markdown.preview.scrollEditorWithPreview 和 scrollPreviewWithEditor;缩放基于 WebView transform 实现,非字体调整,且状态不跨会话保存。

Ctrl+滚轮在 Markdown 预览里没反应?先确认焦点和配置
预览窗口默认不响应 Ctrl+滚轮,不是功能坏了,而是它根本没被“选中”。必须点击预览区域任意位置,让 WebView 获得输入焦点,滚轮缩放才可能生效。但光聚焦还不够——两个关键设置必须同时为 true:markdown.preview.scrollEditorWithPreview 和 markdown.preview.scrollPreviewWithEditor。漏掉任一,预览面板连滚动都不响应,缩放更无从谈起。
常见误操作:
• 在设置 UI 里只开了 scrollPreviewWithEditor,却没翻页找到另一个;
• 用 Markdown: Open Preview(单标签页命令),它不触发双栏同步逻辑,缩放完全不工作;
• editor.accessibilitySupport 设为 "off",部分缩放手势会被系统级禁用。
缩放不是改字体大小,而是 WebView 的 transform: scale()
VS Code 内置 Markdown 预览的缩放,底层是给整个 WebView 渲染容器加 transform: scale(1.2),和编辑器里调 editor.fontSize 完全是两套机制。这意味着:
• 缩放后图片、表格、代码块等所有内容等比放大,不会出现文字变大但图片糊掉的情况;
• 缩放粒度固定:每次 Ctrl+= 或 Ctrl+- 改变约 20%;
• Ctrl+0 不是重置为 100%,而是重置为 markdown.preview.zoomLevel 配置值(默认 1.0,但很多人设成了 1.2)。
如果你发现缩放后布局错乱,大概率是自定义 CSS 里用了 px 固定宽高,而没配 max-width: 100% 或 width: 100% 做兜底。
想全局统一图片尺寸?别碰预览缩放,改 CSS 才是正解
靠缩放预览来“让图变小”是治标不治本。缩放影响全部内容,且导出 PDF 时不会继承这个缩放值。真正稳定的做法是注入全局样式:
装 Markdown Preview Enhanced 插件 → Ctrl+Shift+P 输入 Markdown Preview Enhanced: Customize Css → 在打开的 style.less 末尾加:
.markdown-preview.markdown-preview img {
width: 65% !important;
max-width: 100%;
height: auto;
display: block;
margin: 20px auto;
}
@media print {
img {
width: 85% !important;
margin: 10px auto !important;
}
}
注意:
• !important 是必须的,否则内置样式会覆盖;
• @media print 专为导出 PDF 生效,屏幕预览不走这条规则;
• 导出 PDF 时务必选 Chrome (Puppeteer) 引擎,其他引擎可能忽略 @media print。
Mermaid 图表缩放独立生效,无需额外配置
如果你在 Markdown 里写了 Mermaid 流程图,vscode-markdown-mermaid 插件自带缩放控制,且与预览缩放互不干扰。只要插件已启用,打开预览后:
• Ctrl+滚轮:以鼠标指针为中心缩放图表;
• Ctrl+=/Ctrl+-:按步进放大/缩小;
• Ctrl+0:重置到原始比例。
这个缩放只作用于 Mermaid SVG 容器,不影响 Markdown 正文或图片。但要注意:如果 Mermaid 图过大导致预览区出现滚动条,Ctrl+滚轮 可能先触发页面滚动而非缩放——此时需先点击图表内部再滚。
最易被忽略的一点:预览缩放状态不跨会话保存。关掉 VS Code 再打开,缩放会回到 markdown.preview.zoomLevel 设置值,而不是你上次调的 1.4。如果习惯用非默认缩放,建议直接把 zoomLevel 设为你常用值,比如 1.3,避免每次重调。


















