MarkdownHTML图像语法

插入图片 Markdown 

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

示例图片：

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

示例图片：

<img src=" i-blog.csdnimg /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>

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

---

自存。

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