缩略图typo/thumbnail
显示缩略图。
基本用法
<a href="###">
<img class="x-thumbnail" alt="" src="../../../assets/resources/100x100.png">
</a>图文
<figure class="x-center">
<a href="###">
<img class="x-thumbnail" alt="" src="../../../assets/resources/100x100.png">
</a>
<figcaption><a href="###">我是标题</a></figcaption>
</figure>图文+说明
我是很长很长的说明
<figure>
<a href="###">
<img class="x-thumbnail" alt="" src="../../../assets/resources/100x100.png">
</a>
<figcaption><a href="###">我是标题</a></figcaption>
<p>我是很长很长的说明</p>
</figure>多张图片
结合栅格布局轻松实现图片列表效果。
<div class="x-row x-row-4">
<figure class="x-col">
<a href="###">
<img class="x-thumbnail" alt="" src="../../../assets/resources/100x100.png" width="100%">
</a>
<figcaption><a href="###">我是标题</a></figcaption>
<p>我是很长很长的说明</p>
</figure>
<figure class="x-col">
<a href="###">
<img class="x-thumbnail" alt="" src="../../../assets/resources/100x100.png" width="100%">
</a>
<figcaption><a href="###">我是标题</a></figcaption>
<p>我是很长很长的说明</p>
</figure>
<figure class="x-col">
<a href="###">
<img class="x-thumbnail" alt="" src="../../../assets/resources/100x100.png" width="100%">
</a>
<figcaption><a href="###">我是标题</a></figcaption>
<p>我是很长很长的说明</p>
</figure>
<figure class="x-col">
<a href="###">
<img class="x-thumbnail" alt="" src="../../../assets/resources/100x100.png" width="100%">
</a>
<figcaption><a href="###">我是标题</a></figcaption>
<p>我是很长很长的说明</p>
</figure>
</div>