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

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

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

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

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

![Alt](https://i-blog.csdnimg.cn/blog_migrate/348f8ce8a69c97427cf55dde66f1b4c7.png)

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

2.1 方法一

（1）调整尺寸大小

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

![Alt](https://i-blog.csdnimg.cn/blog_migrate/348f8ce8a69c97427cf55dde66f1b4c7.png =600x600)

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

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

下图只调整了图片尺寸。

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

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

![Alt](https://i-blog.csdnimg.cn/blog_migrate/348f8ce8a69c97427cf55dde66f1b4c7.png#pic_center =600x600)

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

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

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

2.2 方法二

（1）调整尺寸大小

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

<img src="https://i-blog.csdnimg.cn/blog_migrate/348f8ce8a69c97427cf55dde66f1b4c7.png"  width="600" />

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

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

下图只调整了图片尺寸。

（2）调整对齐方式一

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

<img src="https://i-blog.csdnimg.cn/blog_migrate/348f8ce8a69c97427cf55dde66f1b4c7.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://i-blog.csdnimg.cn/blog_migrate/348f8ce8a69c97427cf55dde66f1b4c7.png" width="400" />
</p>

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

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

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

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

（3）一些有用的补充说明

• 可以使用 <div align=“center”> . . . </div>标签替换 <p align=“center”> . . . </p>标签，效果相同。下文中二者也可以相互替换。
• 建议使用百分比的形式宽度数值，如 width = “40%”，以便于调整，尤其是涉及需要一行放多张图片的时候
• 可以在 <div align=“center”> . . . </div>标签或 <p align=“center”> . . . </p>标签中，包含文字内容，用以对图片说明。文字会和图片具有相同的布局效果，比如：居中。但是，需要在图片和文字之间插入一个换行标签 <br>。

<div align = "center">    
<img  src="https://i-blog.csdnimg.cn/blog_migrate/348f8ce8a69c97427cf55dde66f1b4c7.png" width="30%" />
<img  src="https://i-blog.csdnimg.cn/blog_migrate/348f8ce8a69c97427cf55dde66f1b4c7.png" width="30%" />
<img  src="https://i-blog.csdnimg.cn/blog_migrate/348f8ce8a69c97427cf55dde66f1b4c7.png" width="30%" />
<br>
这是3张相同的图片，用来演示说明
</div>

3. 图文混排效果实现

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

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

（1）左图右文

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

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

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

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

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

（2）左文右图

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

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

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

4. 图片添加超链接

实现单击图片时，跳转到其他网页或视频。

<div align="center">
	<a href="https://www.bing.com/?mkt=zh-CN" target="_blank">
    	<img  src="https://i-blog.csdnimg.cn/blog_migrate/348f8ce8a69c97427cf55dde66f1b4c7.png"  width="40%"  />
	</a>
</div>

说明： <a > . . . </a>是用于创建超链接的元素标签。具体来说：

• href="https://www.bing.com/?mkt=zh-CN"：这是超链接的目标 URL。点击链接后，会被带到这个指定的页面。
• target="_blank"：这个属性指定链接打开的方式。_blank 表示链接会在一个新的浏览器标签或窗口中打开，而不是在当前页面上。