module-thumbnail

m-thumbnail

注意.m-thumbnail は、Version2.0.0で画像トリミングの方式が変更されました。

.m-thumbnailの主な変更点
.m-thumbnail-square, .m-thumbnail-round, .m-thumbnail-(ratio-x)to(ratio-y) を使用した場合、CSSのobject-fitによるトリミングを行うようになりました。
object-fitの導入により不要となったため、 .m-thumbnail-horizontal が廃止されました。
Internet Explorer11でトリミングに対応する場合は、別途ライブラリを追加してください。

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

↑width: 200px

<div class="u-margin-r-md">
    <div style="float: left; margin-right: 15px;">
        <img src="https://placehold.jp/150x150.jpg" alt="">
    </div>
</div>

<div class="u-margin-r-md">
    <div style="float: left; margin-right: 15px;">
        <img src="https://placehold.jp/240x320.jpg" alt="">
    </div>
</div>

<div style="float: left; margin-right: 15px; 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>

m-thumbnail-round

画像を正円にトリミングして表示する。別途、幅を指定する必要がある。
img要素のサイズが .m-thumbnail よりも小さい場合は、引き伸ばして表示される。

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

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

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

m-thumbnail-square

画像を正方形にトリミングして表示する。別途、幅を指定する必要がある。
img要素のサイズが .m-thumbnail よりも小さい場合は、引き伸ばして表示される。

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

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

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

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

画像を指定した縦横比で、かつトリミングして表示する。別途、幅を指定する必要がある。
(ratio-x)to(ratio-y)は 3to2, 4to3, 16to9, ogimage(1.91:1), 21to9 に対応している。
img要素のサイズが .m-thumbnail よりも小さい場合は、引き伸ばして表示される。

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

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

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

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

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


<div style="float: left; margin-right: 15px; width: 200px;">
    <div class="m-thumbnail m-thumbnail-3to2">
        <img src="https://placehold.jp/120x600.jpg" alt="">
    </div>
</div>

<div style="float: left; margin-right: 15px; width: 200px;">
    <div class="m-thumbnail m-thumbnail-4to3">
        <img src="https://placehold.jp/120x600.jpg" alt="">
    </div>
</div>

<div style="float: left; margin-right: 15px; width: 200px;">
    <div class="m-thumbnail m-thumbnail-16to9">
        <img src="https://placehold.jp/120x600.jpg" alt="">
    </div>
</div>

<div style="float: left; margin-right: 15px; width: 200px;">
    <div class="m-thumbnail m-thumbnail-ogimage">
        <img src="https://placehold.jp/120x600.jpg" alt="">
    </div>
</div>

<div style="float: left; margin-right: 15px; width: 200px;">
    <div class="m-thumbnail m-thumbnail-21to9">
        <img src="https://placehold.jp/120x600.jpg" alt="">
    </div>
</div>


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

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

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

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

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