Markdown中图片对齐方式及尺寸设置

在markdown编辑模式下导入图片默认尺寸会很大，不符合预期效果，有时候需要对图片的对齐方式和尺寸大小进行调整。

1. 直接上传图片的原始效果

添加图片后默认尺寸很大，会占满整个宽度。

2. 图片尺寸及对齐方式调整

添加图片之后，图片底部（CSDN的编辑器中该指令在图片底部，其他的也可能会在图片上边）会出现一行指令：

![Alt](https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png)

其中，[Alt]中用来添加图片说明；( )中是图片的网络连接地址。

2.1 方法一

（1）调整尺寸大小

直接在连接地址后添加形如 =600x600的数字即可调整图片大小。（推荐）

![Alt](https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png =600x600)

说明：等号 " = " 前面需要有一个空格

• 带尺寸的图片： =600x600
• 宽度确定高度等比例的图片： =600x
• 高度确定宽度等比例的图片： =x600

下图只调整了图片尺寸。

（2）调整对齐方式（推荐）

若需要调整对齐方式，需要在图片链接地址后面添加指令#pic_center，该命令的位置在指定尺寸的指令前面。

![Alt](https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png#pic_center =600x600)

说明：# 前面不需要空格，= 前面需要有一个空格

• 居中对齐：#pic_center
• 靠左对齐：#pic_left
• 靠右对齐：#pic_right

下图同时调整了对齐方式和图片尺寸。

2.2 方法二

（1）调整尺寸大小

通过使用 <img> 标签更改图片尺寸，支持设定宽度、高度、对齐方式等属性。

<img src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png"  width="600" />

说明：属性后面的数值也以写成百分比的形式，如 width = “60%”

• 带尺寸的图片，需同时指定： width = “600”， height = “600”
• 宽度确定高度等比例的图片，只要指定： width = “600”
• 高度确定宽度等比例的图片，只要指定： height = “600”

下图只调整了图片尺寸。

（2）调整对齐方式一

可通过在 <img> 标签内添加 align=“center”属性修改图片的对齐方式。

<img src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png"  align = "right"  width="600" />

说明：该种方法也可以实现左图右字或左字右图的效果

• 居中对齐： align = “middle” ，不知道为啥在CSDN中测试的时候居中不起作用
• 靠左对齐： align = “left”
• 靠右对齐： align = “right”
• 最好将 <img> 标签包裹在 <p align=“center”> . . . </p>标签内使用，可以实现更多、更好的效果。

（2）调整对齐方式二 （推荐）

也可通过将 <img> 标签包裹在 <p align=“center”> . . . </p>标签内修改图片的对齐方式。

<p align = "center">    
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
</p>

通过这种方式还可以实现多张图片的并列排版，只需在 <p align=“center”> . . . </p>标签内添加多行 <img> 标签。每行图片的个数会根据图片的大小及浏览器窗口的大小自动进行调整。

<p align = "center">    
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png" width="400" />
</p>

说明：对单张和多张图片均有效

• 居中对齐： align = “center” ，
• 靠左对齐： align = “left”
• 靠右对齐： align = “right”

3. 图文混排效果实现

实现左图右文或左文右图的效果。

可通过将 <img> 标签包裹在 <p > . . . </p>标签内，并在 <img> 标签内添加 align=“left”属性来实现。

（1）左图右文

说明：
需要左右混排的文字放在 <p > . . . </p>标签内，且需在 <img> 标签行的下面。放在 <p > . . . </p>标签外的排版为正常的上下排版样式。

• 左图右文： align = “left”
• 左文右图： align = “right”

<p>    
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png"  width="400"  align="left" />
文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。
</p>
正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。

文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。文字在右边，图片在左边。

正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。

（2）左文右图

<p>    
<img  src="https://img-blog.csdnimg.cn/b937aa6a992d47d9b205f519bcbbc111.png"  width="400"  align="right"  />
文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。
</p>
正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。

文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。文字在左边，图片在右边。

正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。正常的上下排版。