Markdown HTML 图像语法

插入图片

Markdown

![图片描述](图片链接)

一般来说，直接复制粘贴过来就行了，部分网页/应用可以拖拽，没人会真敲图片的链接吧……

示例图片：

![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png)

HTML

<img src="图片链接" alt="图片描述">

示例图片：

<img src="https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png" alt="Creeper?">

更改尺寸

CSDN 内置 Markdown

![图片描述](图片链接 =尺寸x尺寸)

在图片链接后，空一格，=255x255。即“ =你期望的尺寸x尺寸”，其中左右可以不相等（长宽比）。“x”为小写字母x。

示例图片：

![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png =200x200)

并且，在 CSDN，如果只是想单纯缩放图片，只需要“ =尺寸x”或者“ =x尺寸”，它会自动等比缩放，而不需要你手动计算设置长宽比，非常方便。

![图片描述](图片链接 =尺寸x)

示例图片：

![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png =200x)

---

请注意，在除 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_center)居左：
![图片描述](图片链接#pic_left)居右：
![图片描述](图片链接#pic_right)

在图片链接后，直接加上#pic_xx，#前没有空格。

对齐方式	代码
居中	#pic_center
居左	#pic_left
居右	#pic_right

示例图片居中：

![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png#pic_center)

居右：

![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png#pic_right)

在 CSDN 可以与缩放代码同时使用：

![图片描述](图片链接#pic_center =尺寸x尺寸)

示例图片：

![Creeper?](https://i-blog.csdnimg.cn/direct/f5031c8c4f15421c9882d7eb23540b88.png#pic_center =200x)

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>

点击图像跳转到我的主页：

---

自存。

_{创作不易，如有帮助，点个赞再走？}