Markdwon中多张图片的并排显示(Mardown的灵动使用技巧)
文章目录:
对于强迫症这,使用个Markdown也会因为排版有时看着不舒服,特别想把它掰弯,说掰就掰,还由于什么呢,让我们一起get新技能吧!!!
Markdown的图片居中主要有两种方式:
- Markdown语法
- HTML语法
一、Markdown语法
要一张图片接着一张图片的写,中间不能有换行。如果换行的话则图片也换行
正确的写法:
![描述](图片链接)![描述](图片链接)![描述](图片链接)
测试结果:如果图片过大,在csdn的markdown编辑器中是无法实现这种骚操作的,测试结果如下,还有通过csdn的markdown语法加如的图片默认都是会加上水印链接的
二、HTML语法实现图片的并排显示
1、 图片居中并排
显示
<center class="half">
<img src="https://i-blog.csdnimg.cn/blog_migrate/4ab5f0e78a1095bcc24927871b979ecc.png" width=00/>
<img src="https://i-blog.csdnimg.cn/blog_migrate/4ab5f0e78a1095bcc24927871b979ecc.png" width=200/>
</center>
显示效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/4ab5f0e78a1095bcc24927871b979ecc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4ab5f0e78a1095bcc24927871b979ecc.png)
2、 图片左对齐并排
显示
<figure>
<img src="https://i-blog.csdnimg.cn/blog_migrate/4ab5f0e78a1095bcc24927871b979ecc.png" width=200/>
<img src="https://i-blog.csdnimg.cn/blog_migrate/4ab5f0e78a1095bcc24927871b979ecc.png" width=200/>
<img src="https://i-blog.csdnimg.cn/blog_migrate/4ab5f0e78a1095bcc24927871b979ecc.png" width=200/>
</figure>
显示效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/4ab5f0e78a1095bcc24927871b979ecc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4ab5f0e78a1095bcc24927871b979ecc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/4ab5f0e78a1095bcc24927871b979ecc.png)
3、并排显示在表格中且加上下表图注
实现方法如下代码,使用 HTML 语法,让图片包括在
标签里面,同时也可以加入图片标题,
用到的html标签说明:
<tr>
:表示table row
——同一行的内容都放到这个标签中<td>
:表示table data
,——每一张图片的数据都放在这个里
要新建一个图片行,再加入一对
<tr>
标签,然后把图片放在<td>
里<img src="图片地址">
就行了。这里舍弃同时浏览器会自动缩放图片的大小,不用自己设置<img>
的width
和height
属性,实在方便不少。之所以用到了<center>
标签是为了让图片能在表格的单元格里居中。虽然浏览器会自己适应图片的大小,但是建议还是不要刁难浏览器,最好保证同一行的两个图片的尺寸相差不大,不然会有很丑的后果。
注意:
如果左右两张图片大小不一样可以加入width和height参数手动调节
<table>
<tr>
<td ><center><img src="https://img-blog.csdn.net/20180731150122598?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" >图1 范冰冰 </center></td>
<td ><center><img src="https://img-blog.csdn.net/20180731150122598?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" >图2 范冰冰</center></td>
</tr>
<tr>
<td><center><img src="https://img-blog.csdn.net/20180731150144421?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" >图3 高圆圆</center></td>
<td ><center><img src="https://img-blog.csdn.net/20180731150144421?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzODI2NTY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" >图4 高圆圆</center> </td>
</tr>
</table>
![]() |
![]() |
![]() |
![]() |
注意
如果是截图之后的图片想要放到<img src>
标签中,先将图片粘到markdown中,然后把链接粘贴到src中即可。
例如:
[在这里插入图片描述](https://img-blog.csdnimg.cn/20190222103154693.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTAxMDE5OA==,size_16,color_FFFFFF,t_70
)
把上面的红色链接部分插入到下面的<img> 标签中,如下:
<img src='上面链接中的全部内容(红色部分)'>
♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠ ⊕ ♠