Markdown中图片的相关操作

[TOC]

一、图片的位置

1.1 左

代码一：

<div align=left>
<img src="图片链接" alt="图片说明" style="zoom:30%"/>
</div>

代码二：

![图片说明](图片链接#pic_left)

1.2 中

代码一：

<div align=center>
<img src="图片链接" alt="图片说明" style="zoom:30%"/>
</div>

代码二：

![图片说明](图片链接#pic_center)

1.3 右

代码一：

<div align=right>
<img src="图片链接" alt="图片说明" style="zoom:30%"/>
</div>

代码二：

![图片说明](图片链接#pic_right)

二、图片的缩放

代码一

<img src="图片链接" alt="图片说明" width=400 height=300/>

代码二

<img src="图片链接" alt="图片说明" style="zoom:30%"/>

三、图片在文本的旁边

3.1 图片在文本的左边

<div style="float: left; margin-right: 10px;">
  <img src="图片链接" alt="图片说明" style="zoom:30%" />
</div>

鬼头明里
鬼头明里
鬼头明里
鬼头明里
鬼头明里
鬼头明里

3.2 图片在文本的右边

<div style="float: right; margin-right: 10px;">
  <img src="图片链接" alt="图片说明" style="zoom:30%" />
</div>

鬼头明里
鬼头明里
鬼头明里
鬼头明里
鬼头明里
鬼头明里

3.3 注意的问题

在Markdown中，浮动元素可能受到前面元素的影响，尤其是如果前一个元素是浮动元素。为了解决这个问题，可以在第二个图片的<div>元素之前加一个清除浮动的元素。

<div style="clear: both;"></div>

四、并排显示

4.1 两张居左并排

代码一

<div style="display: flex; justify-content: flex-start;">
  <img src="图片1链接" alt="图片1说明" style="zoom:30%" />
  <img src="图片2链接" alt="图片2说明" style="zoom:30%" />
</div>

代码二

<figure style="text-align: left">
    <img src="图片链接" alt="图片说明" style="zoom:30%"/>
    <img src="图片链接" alt="图片说明" style="zoom:30%"/>
</figure>

4.2 两张居中并排

代码一

<div style="display: flex; justify-content: center;">
  <img src="图片1链接" alt="图片1说明" style="zoom:30%" />
  <img src="图片2链接" alt="图片2说明" style="zoom:30%" />
</div>

代码二

<figure style="text-align: center">
    <img src="图片链接" alt="图片说明" style="zoom:30%"/>
    <img src="图片链接" alt="图片说明" style="zoom:30%"/>
</figure>

4.3 两张居右并排

代码一

<div style="display: flex; justify-content: flex-end;">
  <img src="图片1链接" alt="图片1说明" style="zoom:30%" />
  <img src="图片2链接" alt="图片2说明" style="zoom:30%" />
</div>

代码二

<figure style="text-align: right">
    <img src="图片链接" alt="图片说明" style="zoom:30%"/>
    <img src="图片链接" alt="图片说明" style="zoom:30%"/>
</figure>