Markdown 图片生成器
填入图片地址，设置宽高与对齐方式，即可复制到处都能正确渲染的 Markdown 或 HTML。全部计算都在你的浏览器本地完成。
Markdown 中怎么调整图片大小？
标准 Markdown 没有设置图片尺寸的语法，需要改用 HTML 的 <img> 标签：<img src="image.png" alt="图片描述" width="300">。GitHub、GitLab 以及绝大多数渲染器都会原样保留这段 HTML。只写 width 时高度会按原比例自动缩放；想让图片居中，再用 align="center" 的 div 包一层即可。
<img src="image.png" alt="图片描述" width="300">
<div align="center">
<img src="image.png" alt="图片描述" width="300">
</div>第一段把图片渲染成 300 像素宽、高度按比例自动缩放；第二段是同一张图片，并在页面中水平居中。
在线使用 Markdown 图片生成器
参数设置
输出结果
尺寸与对齐
Markdown 图片语法、尺寸与对齐详解
插入图片只要一行，但控制大小和位置必须借助 HTML——CommonMark 有意把「表现层」排除在规范之外。下面是实际会用到的全部写法。
标准图片语法
一个感叹号、方括号里的替代文字，再加上圆括号里的图片路径。圆括号内引号包裹的标题是可选项，鼠标悬停时显示为提示气泡。
按图片原始尺寸渲染；图片加载失败时显示「图片描述」。
用 HTML 标签设置尺寸
Markdown 本身没有宽高属性，需要换成 <img> 标签——包括 GitHub 在内的绝大多数渲染器都会原样输出这段 HTML。只写 width 时，浏览器会自动按比例计算高度。
<img src="/images/photo.png" alt="图片描述" width="300">
<img src="/images/photo.png" alt="图片描述" width="50%">第一张宽 300 像素；第二张占容器宽度的一半，在窄屏上依然自适应。两者都保持原始比例。
居中、左对齐与右对齐
用带 align 属性的 div 把图片包起来。这是兼容性最好的做法：GitHub 会剥掉行内 style，但会保留 align。如果 div 内部还要继续解析 Markdown，记得在标签内部留一个空行。
<div align="center">
<img src="/images/photo.png" alt="图片描述" width="400">
</div>图片在页面中水平居中。把 center 换成 left 或 right，即可让图片贴向对应一侧。
让图片可点击
把图片语法整体嵌套进链接语法，就得到一张可点击的缩略图，常用于跳转大图或相关页面。如果这张可点击的图片同时还要限定尺寸，只能写成嵌套的 HTML。
[](https://example.com)
<a href="https://example.com"><img src="/images/thumb.png" alt="图片描述" width="200"></a>两行都会生成可点击的图片，但只有 HTML 写法能把宽度限制在 200 像素。
引用式图片
把冗长的图片地址从正文中抽出来，正文里只留一个标签引用。同一张截图重复出现多次、或者 CDN 地址特别长时非常好用。
![图片描述][logo]
[logo]: /images/photo.png "悬停提示"渲染结果与行内写法完全一致；定义行本身不产生任何输出，可以统一放在文件末尾。
编辑器私有的尺寸简写
部分编辑器自行扩展了尺寸语法，本地写起来方便，但在 GitHub 和多数静态站点生成器上会失效，因此不要用在需要对外发布的文档里。
![[photo.png|300]]第一种在 Typora 以及装了 imsize 插件的 markdown-it 中有效；第二种是 Obsidian 的双链写法。GitHub 会把两者原样当作文本输出。
各平台对图片尺寸与对齐的支持
基础的图片语法各处通用，尺寸和对齐则不然——它们取决于平台的 HTML 过滤策略放行了多少标签和属性。
| 平台 | 支持情况 | 说明 |
|---|---|---|
| GitHub / GitLab | 完全支持 | <img> 的 width、height 与 <div align> 均可用；行内 style 属性会被剥离。 |
| Obsidian | 完全支持 | 支持 ![[photo.png|300]] 与  简写，也支持原生 HTML。 |
| VS Code 预览 | 完全支持 | 可渲染 HTML img 标签；不识别 =300x200 这种简写。 |
| Notion | 部分支持 | 粘贴的 Markdown 会转成图片块，只能拖拽手柄调整大小，不能用语法控制。 |
| 部分支持 | 不允许 HTML，因此无法设置尺寸和对齐，图片需通过编辑器上传。 | |
| Discord | 不支持 | 不渲染图片语法；直接粘贴图片链接，Discord 会自动生成预览。 |
如何设置 Markdown 图片的尺寸与对齐
选择图片类型
根据需要选择标准图片、引用式图片或带链接的图片：是直接内联、用标签统一定义，还是点击后跳转。
填写地址与替代文字
粘贴图片的完整地址或相对路径，并写好 alt 替代文字——它同时服务于屏幕阅读器和图片加载失败的读者。
设置尺寸与对齐
填入宽度、高度或两者，并选择居中、左对齐或右对齐。由于纯 Markdown 无法表达尺寸，生成器会自动切换到 HTML 写法。
复制结果
复制 Markdown 或 HTML 输出；提交前先切到预览标签页，确认图片出现在你期望的位置和大小。
常见问题
Markdown 怎么调整图片大小？
标准 Markdown 没有尺寸语法，需要改用 HTML 标签：<img src="image.png" alt="图片描述" width="300">。只写 width 时，浏览器会自动换算高度并保持原比例。也可以用 50% 这类百分比宽度，在窄屏上会自适应。
Markdown 图片怎么居中？
用带 align 属性的 div 包一层：先写 <div align="center">，中间放图片标签，最后写 </div>。GitHub 和 GitLab 会保留 align 属性但剥掉行内 CSS，所以这种写法最稳。允许 style 属性的渲染器也可以用 style="display: block; margin: 0 auto"。
GitHub 上怎么调整图片大小？
GitHub 允许在 Markdown 中直接写 HTML，因此带 width、height 的 <img> 标签在 README、Issue、Pull Request 和 Wiki 中都能正常渲染。GitHub 不支持  这种简写，也会剥离 style 属性，所以务必使用 width 和 height 属性。
Markdown 怎么插入图片？
写一个感叹号，方括号里放替代文字，圆括号里放路径：。路径后面用引号追加一段文字，就是鼠标悬停时的提示。路径可以是完整网址、以 / 开头的站点根路径，也可以是相对路径。
怎么引用本地图片？
使用相对于「文档被渲染的位置」而不是「文档存放位置」的路径：同级目录写 ./images/photo.png，上级目录写 ../images/photo.png。在 GitHub 上相对路径按仓库结构解析，因此仓库被 fork 或克隆后图片依然可用。
怎么让 Markdown 图片可以点击跳转？
把图片语法整体嵌进链接语法：[](https://example.com)，图片本身就成了链接内容。如果这张可点击的图片还要限定尺寸，就改写成 HTML：用 a 标签包裹一个带 width 属性的 img 标签。
怎么给图片加说明文字（caption）？
Markdown 没有图注语法。常见做法是使用 HTML 的 figure 元素：figure 内先放 img 标签，再放 figcaption 元素。多数静态站点生成器都能正确渲染。最保险的降级方案，是在图片下方另起一行写一句斜体说明。
为什么我的 Markdown 图片显示不出来？
常见原因有四个：相对路径写错；图片地址需要登录或做了防盗链；方括号前漏了感叹号；方括号与圆括号之间多了空格。在 GitHub 上还要注意引用 raw 原始文件地址，而不是展示该文件的网页地址。
 这种尺寸写法能用吗？
只在部分编辑器里有效。Typora 以及装了 imsize 插件的 markdown-it 支持它，但 CommonMark、GitHub、GitLab 和 VS Code 自带预览都不支持，会把这段语法原样当作文本显示。需要跨工具流转的文档，请统一使用 HTML 的 img 标签。
alt 替代文字真的有必要写吗？
有必要。alt 是屏幕阅读器朗读的内容，也是图片加载失败时显示的文字，同时还是搜索引擎理解图片的重要依据。描述图片内容而不是文件本身，例如写「部署流水线示意图」而不是「screenshot.png」。