module-thumbnail

thumbnail

一覧ページ、記事中で縮小された画像を表示する。要素自体ではなく、包括している要素にクラスを付与する。
このクラス単独ではそのままのサイズで表示する。幅が制限されていると、そのサイズを超えないよう画像が縮小される。

<div class="clearfix m-b">

<div class="float-l m-r">
    <div class="thumbnail">
        <img src="https://placehold.jp/150x150.jpg" alt="">
    </div>
</div>

<div class="float-l m-r">
    <div class="thumbnail">
        <img src="https://placehold.jp/150x200.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail">
        <img src="https://placehold.jp/480x360.jpg" alt="">
    </div>
</div>

</div>

thumbnail-round

画像を正円にトリミングして表示する。
横長の画像では、上下に余白ができるため、 thumbnail-vertical を併用すること。

<div class="clearfix m-b">

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-round">
        <img src="https://placehold.jp/300x300.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-round">
        <img src="https://placehold.jp/480x360.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-round">
        <img src="https://placehold.jp/360x480.jpg" alt="">
    </div>
</div>

</div>

thumbnail-square

画像を正方形にトリミングして表示する。
横長の画像では、上下に余白ができるため、 thumbnail-vertical を併用すること。

<div class="clearfix m-b">

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-round">
        <img src="https://placehold.jp/300x300.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-round">
        <img src="https://placehold.jp/480x360.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-round">
        <img src="https://placehold.jp/360x480.jpg" alt="">
    </div>
</div>

</div>

thumbnail-(ratio-x)to(ratio-y)

画像を指定した縦横比で、かつトリミングして表示する。別途、幅を指定する必要がある。
(ratio-x)to(ratio-y)は 3to2, 4to3, 16to9, ogimage(1.91:1), 21to9 に対応している。
指定した比率を超える超横長の画像だった場合は、上下に余白ができる。

<div class="clearfix m-b">

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-3to2">
        <img src="https://placehold.jp/480x360.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-4to3">
        <img src="https://placehold.jp/480x360.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-16to9">
        <img src="https://placehold.jp/480x360.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-ogimage">
        <img src="https://placehold.jp/480x360.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-21to9">
        <img src="https://placehold.jp/480x360.jpg" alt="">
    </div>
</div>

</div>


<div class="clearfix m-b">

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-3to2">
        <img src="https://placehold.jp/320x480.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-4to3">
        <img src="https://placehold.jp/320x480.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-16to9">
        <img src="https://placehold.jp/320x480.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-ogimage">
        <img src="https://placehold.jp/320x480.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-21to9">
        <img src="https://placehold.jp/320x480.jpg" alt="">
    </div>
</div>

</div>


<div class="clearfix m-b">

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-3to2">
        <img src="https://placehold.jp/600x200.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-4to3">
        <img src="https://placehold.jp/600x200.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-16to9">
        <img src="https://placehold.jp/600x200.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-ogimage">
        <img src="https://placehold.jp/600x200.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-21to9">
        <img src="https://placehold.jp/600x200.jpg" alt="">
    </div>
</div>

</div>

thumbnail-vertical

thumbnail-round, thumbnail-square, thumbnail-(ratio-x)to(ratio-y) を使用したときに、幅ではなく高さを基準にトリミングする。

<div class="clearfix m-b">

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-vertical thumbnail-square">
        <img src="https://placehold.jp/480x320.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-vertical thumbnail-round">
        <img src="https://placehold.jp/480x320.jpg" alt="">
    </div>
</div>

</div>

<div class="clearfix m-b">

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-vertical thumbnail-3to2">
        <img src="https://placehold.jp/600x200.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-vertical thumbnail-4to3">
        <img src="https://placehold.jp/600x200.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-vertical thumbnail-16to9">
        <img src="https://placehold.jp/600x200.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-vertical thumbnail-ogimage">
        <img src="https://placehold.jp/600x200.jpg" alt="">
    </div>
</div>

<div class="float-l m-r" style="width: 200px;">
    <div class="thumbnail thumbnail-vertical thumbnail-21to9">
        <img src="https://placehold.jp/600x200.jpg" alt="">
    </div>
</div>

</div>