CSDN图片居中、左对齐、右对齐、大小设置

写在前面

  在撰写CSDN博文时，经常需要在博客中插入图片对文字部分进行加以解释或者插入仿真结果，而插入到CSDN中的图片是一个链接的形式，如下所示。

![在这里插入图片描述](https://img-blog.csdnimg.cn/e668760c93ab4dc3aad04981fde0a4ab.jpeg)

  为了博文的排版，有时需要调整图片大小或者图片的位置。

一、图片位置调整

  在插入图片时，默认情况是左对齐的，如下图所示。那么，有时需要对图片的位置进行调整：居中、左对齐、右对齐。

1.1 图片居中

方法一

  方法一的图片居中语法如下，在图片链接后加上语句#pic_center。

（图片链接#pic_center）

例子：

![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_center)

效果：

方法二

  方法二的居中语法如下所示：

<div align=center><img  src="图片链接"/></div>

例子：

<div align=center><img  src="https://i-blog.csdnimg.cn/blog_migrate/c101988b0161ab801713408887f89f86.jpeg"/></div>

效果：

1.2 图片左对齐

  图片左对齐与图片居中的方法一样，都有两种，只需将居中center改为左对齐left即可。

方法一

（图片链接#pic_left）

例子：

![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_left)

效果：

方法二

<div align=left><img  src="图片链接"/></div>

例子：

<div align=left><img  src="https://i-blog.csdnimg.cn/blog_migrate/c101988b0161ab801713408887f89f86.jpeg"/></div>

效果：

1.3 图片右对齐

  同样，图片右对齐只需将居中center改为左对齐right即可，语法如下：

方法一

（图片链接#pic_right）

例子：

![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_right)

效果：

方法二

<div align=right><img  src="图片链接"/></div>

例子：

<div align=right><img  src="https://i-blog.csdnimg.cn/blog_migrate/c101988b0161ab801713408887f89f86.jpeg"/></div>

效果：

二、图片大小调整

  对图片的大小进行调整，这里有两种方法。

方法一

  方法一控制图片的语法格式如下，在图片链接后面加上等于号=，在加上图片的长和宽的像素或者是比例，如果填入的是比例，则根据比例进行等比缩放，如果填的是长和宽的像素，则图片会根据所设长宽像素进行改变，不是等比缩放。

（图片链接=长x宽）
（图片链接=比例x）

例子：

# 原图
![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_center)

# 长400 宽200
![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_center=400x150)

# 等比缩放至原来的30%
![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_center=30%x)

效果：

方法二

  方法二设置图片等比例缩放的语法如下，在图片链接位置填入图片链接，在缩放百分比位置填入缩放的百分比，将图片调整至原图的百分比。值得注意的是，方法二只能进行等比缩放。

<img src="图片链接" width="缩放百分比">

例子：

# 原图
![在这里插入图片描述](https://img-blog.csdnimg.cn/99dc1072e8f1471990b700e1c85d301a.jpeg#pic_center)

# 缩放至原图的30%
<img src="https://i-blog.csdnimg.cn/blog_migrate/c101988b0161ab801713408887f89f86.jpeg#pic_center" width="30%">

效果：

写在后面

  好了，以上就是关于CSDN博客撰写过程中常用的图片修改语法，欢迎评论区友好交流批评指正！！！