module-thumbnail

m-thumbnail

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

↑width: 200px

<div class="u-clearfix u-m-b">

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

<div class="u-float-left u-margin-r-md">
    <div class="m-thumbnail">
        <img src="https://placehold.jp/240x320.jpg" alt="">
    </div>
</div>

<div class="u-float-left u-margin-r-md" style="width: 200px;">
    <div class="m-thumbnail">
        <img src="https://placehold.jp/480x360.jpg" alt="">
    </div>
    <p class="u-m-y-0">↑width: 200px</p>
</div>

</div>

m-thumbnail-round

画像を正円にトリミングして表示する。別途、幅を指定する必要がある。
縦長の画像では左右に余白ができるため、余白を出したくない場合は .m-thumbnail-horizontal を併用する必要がある。

<div class="u-clearfix u-m-b">

<div class="u-float-left u-margin-r-md" style="width: 200px;">
    <div class="m-thumbnail m-thumbnail-round">
        <img src="https://placehold.jp/200x200.jpg" alt="">
    </div>
</div>

<div class="u-float-left u-margin-r-md" style="width: 200px;">
    <div class="m-thumbnail m-thumbnail-round">
        <img src="https://placehold.jp/200x100.jpg" alt="">
    </div>
</div>

<div class="u-float-left u-margin-r-md" style="width: 200px;">
    <div class="m-thumbnail m-thumbnail-round">
        <img src="https://placehold.jp/375x667.jpg" alt="">
    </div>
</div>

</div>

m-thumbnail-square

画像を正方形にトリミングして表示する。別途、幅を指定する必要がある。
縦長の画像では左右に余白ができるため、余白を出したくない場合は .m-thumbnail-horizontal を併用する必要がある。

<div class="u-clearfix u-m-b">

<div class="u-float-left u-margin-r-md" style="width: 200px;">
    <div class="m-thumbnail m-thumbnail-square">
        <img src="https://placehold.jp/200x200.jpg" alt="">
    </div>
</div>

<div class="u-float-left u-margin-r-md" style="width: 200px;">
    <div class="m-thumbnail m-thumbnail-square">
        <img src="https://placehold.jp/200x100.jpg" alt="">
    </div>
</div>

<div class="u-float-left u-margin-r-md" style="width: 200px;">
    <div class="m-thumbnail m-thumbnail-square">
        <img src="https://placehold.jp/375x667.jpg" alt="">
    </div>
</div>

</div>

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

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

<div class="u-clearfix u-m-b">

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

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

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

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

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

</div>


<div class="u-clearfix u-m-b">

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

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

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

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

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

</div>


<div class="u-clearfix u-m-b">

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

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

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

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

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

</div>

m-thumbnail-horizontal

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

<div class="u-clearfix u-m-b">

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

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

</div>

<div class="u-clearfix u-m-b">

<div class="u-float-left u-margin-r-md" style="width: 200px;">
    <div class="m-thumbnail m-thumbnail-horizontal m-thumbnail-3to2">
        <img src="https://placehold.jp/375x667.jpg" alt="">
    </div>
</div>

<div class="u-float-left u-margin-r-md" style="width: 200px;">
    <div class="m-thumbnail m-thumbnail-horizontal m-thumbnail-4to3">
        <img src="https://placehold.jp/375x667.jpg" alt="">
    </div>
</div>

<div class="u-float-left u-margin-r-md" style="width: 200px;">
    <div class="m-thumbnail m-thumbnail-horizontal m-thumbnail-16to9">
        <img src="https://placehold.jp/375x667.jpg" alt="">
    </div>
</div>

<div class="u-float-left u-margin-r-md" style="width: 200px;">
    <div class="m-thumbnail m-thumbnail-horizontal m-thumbnail-ogimage">
        <img src="https://placehold.jp/375x667.jpg" alt="">
    </div>
</div>

<div class="u-float-left u-margin-r-md" style="width: 200px;">
    <div class="m-thumbnail m-thumbnail-horizontal m-thumbnail-21to9">
        <img src="https://placehold.jp/375x667.jpg" alt="">
    </div>
</div>

</div>