Markdown:插入图片和图注

在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://i-blog.csdnimg.cn/blog_migrate/0334afbbac97fb69a4bc538d638ad9b7.png

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


孙红雷犬

并排插入图片

使用html语言中的标签

<figure class="half">
    <img src="https://i-blog.csdnimg.cn/blog_migrate/719917caaf59e975d08ebc6987f42a0a.png" title="Logo" width="300" /> 
    <img src="https://i-blog.csdnimg.cn/blog_migrate/7b04aa53f95323798ddc2e390a61b5f7.png" title="Logo" width="300" />
</figure>
  • 并排插入图片并居中
<center class="half">
    <img src="https://i-blog.csdnimg.cn/blog_migrate/719917caaf59e975d08ebc6987f42a0a.png" title="Logo" width="300" /> 
    <img src="https://i-blog.csdnimg.cn/blog_migrate/7b04aa53f95323798ddc2e390a61b5f7.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://i-blog.csdnimg.cn/blog_migrate/dccc2259db8199adcf138a6e64b7f279.png#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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值