[JavaScript知识库]Markdown：插入图片和图注

• 在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)

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖