Back

Markdown里图片并列显示

在编辑博文的时候,有时会想把两张图片并列在一起显示,参考了网上内容,分享一下。

首先记住一点,在markdown里是可以直接写html代码的。这个前提下很自然的有下面的方法:

调整图片宽度/高度:

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

宽度是 width,高度是 heighttitle 为图片描述。

单张居中显示:

<center>
    <img src="http://example.com/xxx.png">
</center>

或者:

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

两张并排显示:

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

三张并排显示:

<figure class="third">
    <img src="http://xxx.jpg">
    <img src="http://xxx.jpg">
    <img src="http://xxx.jpg">
</figure>
Built with Hugo
Theme Stack designed by Jimmy