hexo、markdown图片并行显示


hexo、markdown图片并行显示

1.markdown图片显示方法

1.1 Alt text

![Alt text](https://img-blog.csdnimg.cn/20190811133756709.png "optional title")

效果:
Alt text

Alt text:图片的Alt标签,用来描述图片的关键词,可以不写。最初的本意是当图片因为某种原因不能被显示时而出现的替代文字,后来又被用于SEO,可以方便搜索引擎根据Alt text里面的关键词搜索到图片。 图片链接:可以是图片的本地地址或者是网址。”optional title”:鼠标悬置于图片上会出现的标题文字,可以不写。

1.2 插入本地图片 ![avatar]

只需要在基础语法的括号中填入图片的位置路径即可,支持绝对路径和相对路径。
例如:

![avatar](/home/picture/1.png)

不灵活不好分享,本地图片的路径更改或丢失都会造成markdown文件调不出图。

只需要在基础语法的括号中填入图片的网络链接即可,现在已经有很多免费/收费图床和方便传图的小工具可选。

效果:
avatar

1.3 控制图片大小的插入网络图片

<center>
<img src="https://img-blog.csdnimg.cn/20190811133756709.png" width = "400" height = "302" alt="图片名称" align=center />
</center>

效果如下所示:

图片名称

2.markdown图片并行显示

以上两种方法无法将图片并行显示:
于是尝试如下方法:但均无法满足需求

2.1 方法1

<center class="half">
    <img src="https://img-blog.csdnimg.cn/20190811133756709.png" width="100"/> <img src="https://img-blog.csdnimg.cn/20190811133756709.png" width="100"/>  <img src="https://img-blog.csdnimg.cn/20190811133756709.png" width="100"/>
</center>
<center class="half">
    <img src="https://img-blog.csdn.net/2018061215200776?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODA4OTYx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="200"/><img src="https://img-blog.csdn.net/20180612152032532?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODA4OTYx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="200"/><img src="https://img-blog.csdn.net/20180612152100203?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIxODA4OTYx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70" width="200"/>
</center>

效果:


该方法在markdown中显示为并行但是hexo页面中却不能满足需求。

2.2 方法2

<center>
<figure>
<img src="https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png" />
<img src="https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png" />
</figure>
</center>

效果:


</center>
该方法也不满足要求

2.2 方法3

<div style="float:left;border:solid 1px 000;margin:2px;"><img src="https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png"  width="200" height="200" ></div>
<div style="float:left;border:solid 1px 000;margin:2px;"><img src="https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png"  width="200" height="200" ></div>
<div style="float:left;border:solid 1px 000;margin:2px;"><img src="https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png" width="200" height="200" ></div>
<div style="float:left;border:solid 1px 000;margin:2px;"><img src="https://img2018.cnblogs.com/blog/1735896/202001/1735896-20200116162140471-237299356.png" width="200" height="200" ></div>
该方法满足需求 但是没有空行,需要在最后加入一行
<div style="float:none;clear:both;">

</div>

文章作者: 万鲲鹏
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 万鲲鹏 !
评论
  目录