文章目录

在Markdown中插入图片,调节位置,大小,以及插入图注。 并排插入图片 并排插入图片但无缝隙 简单的插入可调整大小图片 使用图床(腾讯云cos+picgo)

在markdown插入图片主要有两种方法,一个是使用markdown自身的语言格式,另一个是使用html语言格式。相比较而言,后者选择性更多,展示图片的功能更强大。

在Markdown中插入图片,调节位置,大小,以及插入图注。

text
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<center>
<img style="border-radius: 0.3125em;
   box-shadow: 0 2px 4px 0 rgba(34,36,38,.12),0 2px 10px 0 rgba(34,36,38,.08);" 
   width = "300" height = "200"
   src="在这里插入图片地址" width = "60%" alt=""/>
   

   <div style="color:orange; border-bottom: 1px solid #d9d9d9;
   display: inline-block;
   color: #999;
   padding: 2px;">
     在这里插入图片注释
      </div>
</center>
https://img-blog.csdnimg.cn/86c08fb9ae9741169cbcffbf8b9d1fc1.png

其中width = "60"可以将图片宽度(等比例)压缩为整页宽的60%。

![](https://img-blog.csdnimg.cn/86c08fb9ae9741169cbcffbf8b9d1fc1.png)

孙红雷犬

并排插入图片

使用html语言中的标签

text
1 2 3 4 5
<figure class="half">
![](https://img-blog.csdnimg.cn/2f913e6e3de8414fa77c73e34ac659b9.png)
![](https://img-blog.csdnimg.cn/273ff7fefb674fdeb1497cc93d024afd.png)
</figure>
![](https://img-blog.csdnimg.cn/2f913e6e3de8414fa77c73e34ac659b9.png) ![](https://img-blog.csdnimg.cn/273ff7fefb674fdeb1497cc93d024afd.png)

并排插入图片并居中

text
1 2 3 4 5
<center class="half">
![](https://img-blog.csdnimg.cn/2f913e6e3de8414fa77c73e34ac659b9.png)
![](https://img-blog.csdnimg.cn/273ff7fefb674fdeb1497cc93d024afd.png)
</center>
![](https://img-blog.csdnimg.cn/2f913e6e3de8414fa77c73e34ac659b9.png) ![](https://img-blog.csdnimg.cn/273ff7fefb674fdeb1497cc93d024afd.png)

并排插入图片但无缝隙

text
1 2 3 4 5
<center>

![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png)![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162142968-297860512.png)
</center>

注意此时应该在

下面空一行。

![](https://img-blog.csdnimg.cn/img_convert/87a459611314da1ca07cb34592b72712.png) ![](https://img-blog.csdnimg.cn/img_convert/e68d97200c1ac6de3ddf9cf6fdb14a5c.png)

简单的插入可调整大小图片

图片太大可能会失效。

text
1 2
![南瓜](https://img-blog.csdnimg.cn/e8e74a31052b4f19a11acb1ac1938b17.png?x_16#pic_center =300x300)

南瓜

使用图床(腾讯云cos+picgo)

注意不能使用
,否则会出现警告:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eD7CAzo6-1654881859293)(https://picture-blog-1312401031.cos.ap-chongqing.myqcloud.com/202206100223617.svg)]

应该使用html格式的代码:

text
1 2 3 4
<center class="half">
![](https://picture-blog-1312401031.cos.ap-chongqing.myqcloud.com/202206100223617.svg) 
</center>

原文地址:https://blog.csdn.net/qq_32515081/article/details/124395842?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168905825116782425116257%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168905825116782425116257&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-7-124395842-null-null.142^v88^insert_down38v5,239^v2^insert_chatgpt&utm_term=markdown