Typora调整图片显示尺寸：使用HTML标签指定宽度与缩放比例教程

在 Typora 中调整图片大小，实质是改变图片在文档中的显示尺寸，而非直接修改原始照片的像素数据。这种方法能灵活控制排版布局，且设置会随 Markdown 文件保存，方便后续分享或导出。下面以 Windows 版 Typora 为例，演示如何将一张本地图片设置为特定宽度显示，并调整为不同尺寸观察变化。

Typora 官方支持使用 HTML 图片标签来指定宽度、高度或缩放比例。由于标准 Markdown 图片语法本身不包含统一的尺寸参数，因此本例将在文档中直接使用 HTML 标签实现精准控制。

Typora 编辑器中显示包含本地图片引用的 Markdown 文档

1. 准备文档和图片，确认路径可用

建立一个练习文件夹，在其中创建名为“图片说明.md”的文件，并新建一个 images 子文件夹，放入测试图片“sample.png”。用 Typora 打开该 Markdown 文件，先输入标准的 Markdown 图片引用，确保图片能正常加载：

这里的路径是相对于 Markdown 文件所在位置的相对路径。如果图片未显示，请优先检查文件名、扩展名以及文件夹层级是否正确，避免在路径错误的情况下盲目调整尺寸参数。

本例使用本地素材，无需上传网络。后续若需分享文件，请务必将 Markdown 文件与 images 文件夹一并打包，防止出现只有文字没有图片的情况。

1. 准备文档和图片，确认路径可用

2. 切换源代码模式，用标签指定宽度

在 Typora 菜单栏点击【视图】，选择【源代码模式】（或使用快捷键 Ctrl + /）。找到刚才插入的图片引用代码，将其替换为以下 HTML 代码：

退出源代码模式回到预览状态，观察图片是否已按指定的 300 像素宽度显示。仅设置 width 属性时，高度会自动按原图比例缩放，避免图像变形。切勿随意同时填写不匹配的高度值，以免导致图片拉伸失真。

在源代码模式中编写带有 width 属性的 img 标签

需要注意的是，300 仅代表显示宽度，并非要求原图必须只有 300 像素宽。此外，当前使用的主题或内容区域可能对图片最大显示宽度有限制，实际视觉效果需结合文档整体布局进行判断。

3. 修改数值，区分单图尺寸与整体缩放

再次进入【源代码模式】，将上述代码中的 width 数值从 300 改为 450，然后退出源代码模式。对比前后变化，可以清晰看到图片显示变大，但依然是同一张素材，证明变化源于尺寸设置。

如果只是为了看清文档细节，可以使用【视图】菜单中的放大或缩小功能。但这种方式会同时改变文字和其他元素的显示比例，属于全局视图缩放，不能替代对单张图片尺寸的独立设置。

若原图分辨率较低，放大显示后出现模糊，这是正常现象。增加显示宽度并不会凭空增加图像细节，也无法通过此方法压缩原始文件大小或重新采样原图。

4. 需要按比例显示时，使用 zoom 样式

如果希望按原始尺寸的一定比例显示，可以使用 style 属性中的 zoom 参数，例如：

这可以作为固定宽度写法的替代方案。初次操作时建议只选择一种方式，避免在同一张图片上同时叠加 width、height 和 zoom 参数，造成冲突或难以判断哪个参数生效。

需注意，CSS 属性在 Typora 的编辑预览环境与最终导出环境（如 PDF 或 HTML）中的支持程度可能有所不同。不要仅凭编辑界面的显示效果，就推断所有 CSS 样式在导出后都能完美呈现。

4. 需要按比例显示时，使用 zoom 样式

5. 保存重开验证，并检查导出效果

按 Ctrl + S 保存 Markdown 文件，关闭 Typora 后重新打开该文件，确认图片依然保持设定的尺寸。此时查看 sample.png 的文件属性，会发现其原始大小并未改变，证明此次操作仅影响了文档内的显示效果。

当需要导出为 PDF 或 HTML 时，通过【文件】→【导出】选择目标格式，生成后打开结果文件，检查图片的大小、清晰度以及分页情况。若计划发布到某些网页平台，需注意部分平台可能会过滤 HTML 标签或内联样式，导致尺寸设置失效，届时需根据平台规则另行处理。

若想恢复默认显示，只需将代码改回最初的 Markdown 图片引用即可。保留好图片路径和素材文件，根据最终的阅读或导出环境选择合适的宽度设置，能让文档维护更加轻松。

通过导出功能检查图片在PDF中的最终效果