Markdown 图片的简单处理

0. 前言

最近写 md 文章的时候发现，在 markdown 里插入一些很长的图片的时候，会显得很不好看，于是去查了一下如何实现 markdown 里图片的并排显示，参考了各个博客内的内容和 markdown 文档，了解 markdown 支持一些 html 的标签，下面用 <img> 实现对图片的简单处理。

1. 单张居中显示

1 2 3 4 5 6 7 8 9

<center> <img src="http://dreamofbook.qiniudn.com/Zero.png"> </center> OR <figure> <img src="http://xxx.jpg"> </figure>

2. 固定图片宽度 / 高度：

<img src="http://xxx.jpg" title="Logo" width="100" />

宽度是 Width，高度是 High。Title 为图片描述。

3. 两张并排显示：

1 2 3

<figure class="half"> <img src="http://xxx.jpg"><img src="http://yyy.jpg"> </figure>

4. 三张并排显示：

1 2 3

<figure class="third"> <img src="http://xxx.jpg"><img src="http://yyy.jpg"><img src="http://zzz.jpg"> </figure>

5. 固定宽度，并排显示并居中

就是把上面的几个例子和起来，下面给出代码

1 2 3

<center class="half"> <img src="http://xxx.jpg" width="300"/><img src="http://yyy.jpg" width="300"/> </center>

2019-05-03 • 

CODE 

• 

• markdown