Markdown HTML 图像语法
插入图片
Markdown
一般来说，直接复制粘贴过来就行了，部分网页/应用可以拖拽，没人会真敲图片的链接吧……
示例图片：
HTML
<img src="图片链接" alt="图片描述">
示例图片：
<img src="https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png" alt="Creeper?">
更改尺寸
CSDN 内置 Markdown
在图片链接后，空一格，=255x255。即“ =你期望的尺寸x尺寸”，其中左右可以不相等（长宽比）。“x”为小写字母x。
示例图片：
并且，在 CSDN，如果只是想单纯缩放图片，只需要“ =尺寸x”或者“ =x尺寸”，它会自动等比缩放，而不需要你手动计算设置长宽比，非常方便。
示例图片：
请注意，在除 CSDN 外的编辑器，例如 Typora、VS Code 插件 Office Viewer(Markdown Editor) 以及 Jupyter Notebook，虽然能够通过 Markdown 语法插入图片，但似乎无法通过上述方法更改尺寸。
不过 Typora 内置了缩放工具，缩放后会变成 HTML 语法。
上面提到的三种编辑器，都只支持 HTML 语法缩放图片。
HTML
自定义高度与宽度：
<img src="图片链接" alt="图片描述" width="255" height="255">确定宽度等比缩放：
<img src="图片链接" alt="图片描述" width="255">确定高度等比缩放：
<img src="图片链接" alt="图片描述" height="255">按百分比等比缩放：
<img src="图片链接" alt="图片描述" style="zoom:25%;">
通过调整 height 与 width 属性设置图像的高度与宽度。
原图：
自定义长和宽缩放：
确定宽度等比缩放：
按百分比等比缩放：
对齐方式
Markdown
居中：
居左：
居右：
在图片链接后，直接加上#pic_xx，#前没有空格。
| 对齐方式 | 代码 |
|---|---|
| 居中 | #pic_center |
| 居左 | #pic_left |
| 居右 | #pic_right |
示例图片居中：
居右：
在 CSDN 可以与缩放代码同时使用：
示例图片：
HTML
<p><b>居左：</b></p>
<div style="text-align:left;"><img src="图片链接" alt="图片描述">
</div><p><b>居中：</b></p>
<div style="text-align:center;"><img src="图片链接" alt="图片描述">
</div><p><b>居右：</b></p>
<div style="text-align:right;"><img src="图片链接" alt="图片描述">
</div>
注意，上述代码在 CSDN 不可用。如需改变图片位置，请使用 Markdown 语法。
在 Typora、VS Code 插件 Office Viewer(Markdown Editor) 以及 Jupyter Notebook 正常显示。
下图是 Typora 渲染效果图：
在文字中排列图片
调整文字和图片的位置
CSDN & HTML
CSDN 也借用_HTML_ 语法：
<p><b>整体居左，图片两侧均可输入文字：</b></p>
<p align="left">左左左 <img src="图片链接" alt="图片描述"> 右右右</p><p><b>整体居中，图片两侧均可输入文字：</b></p>
<p align="middle">左左左 <img src="图片链接" alt="图片描述"> 右右右</p><p><b>整体居右，图片两侧均可输入文字：</b></p>
<p align="right">左左左 <img src="图片链接" alt="图片描述"> 右右右</p>
上述代码渲染后效果：
整体居左，图片两侧均可输入文字：
左左左 右右右
整体居中，图片两侧均可输入文字：
左左左 右右右
整体居右，图片两侧均可输入文字：
左左左 右右右
只在 Typora 不可用。 其实也能用，只不过图片会一直居中，但文字位置改变，渲染效果如下图：
想在 Typora 实现上述效果，请用如下代码（上文对齐方式提及）：
<p><b>居左：</b></p>
<div style="text-align:left;">左左左 <img src="图片链接" alt="图片描述"> 右右右
</div><p><b>居中：</b></p>
<div style="text-align:center;">左左左 <img src="图片链接" alt="图片描述"> 右右右
</div><p><b>居右：</b></p>
<div style="text-align:right;">左左左 <img src="图片链接" alt="图片描述"> 右右右
</div>
渲染效果图：
在 CSDN 不可用。
当你不输入文字时，就是改变图片对齐方式：
<p><b>居左：</b></p>
<p align = "left"><img src="图片链接" alt="图片描述"></p>
<p><img src="图片链接" alt="图片描述" align = "left"></p><p><b>居中：</b></p>
<p align = "middle"><img src="图片链接" alt="图片描述"></p>
<p><img src="图片链接" alt="图片描述" align = "middle"></p><p><b>居右：</b></p>
<p align = "right"><img src="图片链接" alt="图片描述"></p>
<p><img src="图片链接" alt="图片描述" align = "right"></p>
渲染效果如下：
整体居左：
整体居中：
整体居右：
同样的，在 Typora 无法正常显示，除此外均可用。
调整文字相对于图片的位置
<p><b>默认 (align="bottom")：</b></p>
<p>字字字 <img src="图片链接" alt="图片描述" align=""> 字字字</p><p><b>align="middle/center"：</b></p>
<p>字字字 <img src="图片链接" alt="图片描述" align="middle"> 字字字</p><p><b>align="top"：</b></p>
<p>字字字 <img src="图片链接" alt="图片描述" align="top"> 字字字</p>
上述代码渲染后效果：
默认 (align="bottom")：
字字字 字字字
align="middle/center"：
字字字 字字字
align="top"：
字字字 字字字
在 Typora 无法正常显示，除此外均可用。
图片在文字的左或右
一段文字
CSDN & HTML
CSDN 也借用 HTML 语法：
<p><b>图片居左，所有文字在图片右侧：</b></p>
<p>左左左 <img src="图片链接" alt="图片描述" align="left"> 右右右</p><p><b>图片居右，所有文字在图片左侧：</b></p>
<p>左左左 <img src="图片链接" alt="图片描述" align="right"> 右右右</p>
图片居左，所有文字在图片右侧：
左左左 右右右 这是凑数文字，这是凑数文字，这是凑数文字，这是凑数文字，这是凑数文字，用来帮助理解，达到视觉效果。
图片居右，所有文字在图片左侧：
左左左 右右右 这是凑数文字，这是凑数文字，这是凑数文字，这是凑数文字，这是凑数文字，用来帮助理解，达到视觉效果。
是一种排版，可以理解为 Word 文档四周型环绕(但也有区别)。
本文提到的编辑器均可用。 但是，只有在 CSDN 才有如此效果，在另外三个编辑器渲染效果如下图：
不过你手动空几行也就是了。或者在末尾敲几个</br>。
少量文字
仅 HTML
<p>
<img src="图片链接" alt="图片描述" style="float:left"> 图片在文本左边。
</p><p>
<img src="图片链接" alt="图片描述" style="float:right"> 图片在文本右边。
</p>
上述代码在 CSDN 无法正常显示。渲染效果如下：
图片在文本左边。
图片在文本右边。
不过你可以这样
<p><img src="图片链接" alt="图片描述" style="float:left"> 图片在文本左边。 </p><p>图片在文本右边。<img src="图片链接" alt="图片描述" style="float:right"> </p>渲染效果如下：
图片在文本右边。
在上文提到的三个编辑器都可以正常显示。渲染效果如下图：
将图像作为一个链接
Markdown
如果想给图片增加链接，将图像的 Markdown 括在方括号中，然后将链接添加在圆括号中。
示例，点击下图会跳转到我的主页：
[](点击图片跳转的链接)
就是链接嵌套。
HTML
<p><a href="点击图片要跳转的链接"><img src="图片链接" alt="图片描述" >
</a></p>
点击图像跳转到我的主页：
自存。
创作不易，如有帮助，点个赞再走？