文章目录
- 在Markdown中插入图片,调节位置,大小,以及插入图注。
- 并排插入图片
- 并排插入图片但无缝隙
- 简单的插入可调整大小图片
- 使用图床(腾讯云cos+picgo)
在markdown插入图片主要有两种方法,一个是使用markdown自身的语言格式,另一个是使用html语言格式。相比较而言,后者选择性更多,展示图片的功能更强大。
在Markdown中插入图片,调节位置,大小,以及插入图注。
<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=""/><br><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%。
孙红雷犬
并排插入图片
使用html语言中的标签
<figure class="half"><img src="https://img-blog.csdnimg.cn/2f913e6e3de8414fa77c73e34ac659b9.png" title="Logo" width="300" /> <img src="https://img-blog.csdnimg.cn/273ff7fefb674fdeb1497cc93d024afd.png" title="Logo" width="300" />
</figure>
- 并排插入图片并居中
<center class="half"><img src="https://img-blog.csdnimg.cn/2f913e6e3de8414fa77c73e34ac659b9.png" title="Logo" width="300" /> <img src="https://img-blog.csdnimg.cn/273ff7fefb674fdeb1497cc93d024afd.png" title="Logo" width="300" />
</center>
并排插入图片但无缝隙
<center>![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png)![](https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162142968-297860512.png)
</center>
注意此时应该在<center>
下面空一行。
简单的插入可调整大小图片
图片太大可能会失效。
![南瓜](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格式的代码:
<center class="half"><img src="https://picture-blog-1312401031.cos.ap-chongqing.myqcloud.com/202206100223617.svg" title="Logo" width="400" />
</center>