module-thumbnail

echo-thumbnail

一覧ページ、記事中で縮小された画像を表示する。要素自体ではなく、包括している要素にクラスを付与する。

span, div, a, figure 要素に対応している。
このクラス単独ではそのままのサイズと縦横比で表示する。幅が制限されていると、そのサイズを超えないよう画像が縮小される。

a要素でマークアップすると、hover時に画像の透明度が上がる。

画像よりも小さい幅を指定した場合
figure要素でマークアップした場合
figcaption要素です
a要素でマークアップした場合 a要素 > figure要素でマークアップした場合
figcaption要素です
 
<div class="echo-thumbnail echo-margin-right-lg">
    <img src="https://placehold.jp/150x150.jpg" alt="">
</div>

<div class="echo-margin-top-lg" style="width: 200px;">
    <dfn>画像よりも小さい幅を指定した場合</dfn>
    <div class="echo-thumbnail">
        <img src="https://placehold.jp/480x360.jpg" alt="">
    </div>
</div>

<div class="echo-margin-top-lg">
    <dfn>figure要素でマークアップした場合</dfn>
    <figure class="echo-thumbnail">
        <img src="https://placehold.jp/150x150.jpg" alt="">
        <figcaption>figcaption要素です</figcaption>
    </figure>
</div>

<div class="echo-margin-top-lg">
    <dfn>a要素でマークアップした場合</dfn>
    <a href="#" class="echo-thumbnail">
        <img src="https://placehold.jp/150x150.jpg" alt="">
    </a>
    <dfn>a要素 > figure要素でマークアップした場合</dfn>
    <a href="#" class="echo-thumbnail">
        <figure>
            <img src="https://placehold.jp/150x150.jpg" alt="">
            <figcaption>figcaption要素です</figcaption>
        </figure>
    </a>
</div>

sub class echo-thumbnail-circle

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

a要素でマークアップすると、hover時に画像が拡大する。

画像のトリミング、および引き伸ばしは object-fit プロパティを使用している。Internet Explorer11以前では画像が正方形ではなかった場合、画像の縦横比が歪んで表示される。
Internet Explorer11以前に対応する場合は、別途ライブラリを追加すること。

figure要素でマークアップした場合
a要素でマークアップした場合 a要素 > figure要素でマークアップした場合 
<div style="width: 200px;">
    <div class="echo-thumbnail echo-thumbnail-circle">
        <img src="https://placehold.jp/480x360.jpg" alt="">
    </div>
</div>

<div class="echo-margin-top-lg" style="width: 200px;">
    <dfn>figure要素でマークアップした場合</dfn>
    <figure class="echo-thumbnail echo-thumbnail-circle">
        <img src="https://placehold.jp/150x150.jpg" alt="">
    </figure>
</div>

<div class="echo-margin-top-lg" style="width: 200px;">
    <dfn>a要素でマークアップした場合</dfn>
    <a href="#" class="echo-thumbnail echo-thumbnail-circle">
        <img src="https://placehold.jp/150x150.jpg" alt="">
    </a>
    <dfn>a要素 > figure要素でマークアップした場合</dfn>
    <a href="#" class="echo-thumbnail echo-thumbnail-circle">
        <figure>
            <img src="https://placehold.jp/150x150.jpg" alt="">
        </figure>
    </a>
</div>

sub class echo-thumbnail-square

画像を正方形にトリミングして表示する。幅を指定する必要がある。
figcaption 要素は使用できない。

img要素のサイズが .echo-thumbnail よりも小さい場合は、引き伸ばして表示される。

figure要素でマークアップした場合
a要素でマークアップした場合 a要素 > figure要素でマークアップした場合 
<div style="width: 200px;">
    <div class="echo-thumbnail echo-thumbnail-square">
        <img src="https://placehold.jp/480x360.jpg" alt="">
    </div>
</div>

<div class="echo-margin-top-lg" style="width: 200px;">
    <dfn>figure要素でマークアップした場合</dfn>
    <figure class="echo-thumbnail echo-thumbnail-square">
        <img src="https://placehold.jp/150x150.jpg" alt="">
    </figure>
</div>

<div class="echo-margin-top-lg" style="width: 200px;">
    <dfn>a要素でマークアップした場合</dfn>
    <a href="#" class="echo-thumbnail echo-thumbnail-square">
        <img src="https://placehold.jp/150x150.jpg" alt="">
    </a>
    <dfn>a要素 > figure要素でマークアップした場合</dfn>
    <a href="#" class="echo-thumbnail echo-thumbnail-square">
        <figure>
            <img src="https://placehold.jp/150x150.jpg" alt="">
        </figure>
    </a>
</div>

sub class echo-thumbnail-(ratio-x)to(ratio-y)

画像を指定した縦横比で、かつトリミングして表示する。別途、幅を指定する必要がある。
figcaption 要素は使用できない。

(ratio-x)to(ratio-y)は 3to2, 4to3, 16to9, ogimage(1.91:1), 21to9 に対応している。
img要素のサイズが .echo-thumbnail よりも小さい場合は、引き伸ばして表示される。

a要素でマークアップした場合

<div style="width: 200px;">
    <div class="echo-thumbnail echo-thumbnail-3to2">
        <img src="https://placehold.jp/360x360.jpg" alt="">
    </div>
</div>

<div class="echo-margin-top-lg" style="width: 200px;">
    <div class="echo-thumbnail echo-thumbnail-4to3">
        <img src="https://placehold.jp/360x360.jpg" alt="">
    </div>
</div>

<div class="echo-margin-top-lg" style="width: 200px;">
    <div class="echo-thumbnail echo-thumbnail-16to9">
        <img src="https://placehold.jp/360x360.jpg" alt="">
    </div>
</div>

<div class="echo-margin-top-lg" style="width: 200px;">
    <div class="echo-thumbnail echo-thumbnail-ogimage">
        <img src="https://placehold.jp/360x360.jpg" alt="">
    </div>
</div>

<div class="echo-margin-top-lg" style="width: 200px;">
    <div class="echo-thumbnail echo-thumbnail-21to9">
        <img src="https://placehold.jp/360x360.jpg" alt="">
    </div>
</div>

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-sm">a要素でマークアップした場合</p>

<div class="echo-margin-top-lg" style="width: 200px;">
    <a href="#" class="echo-thumbnail echo-thumbnail-3to2">
        <img src="https://placehold.jp/360x360.jpg" alt="">
    </a>
</div>

<div class="echo-margin-top-lg" style="width: 200px;">
    <a href="#" class="echo-thumbnail echo-thumbnail-4to3">
        <img src="https://placehold.jp/360x360.jpg" alt="">
    </a>
</div>

<div class="echo-margin-top-lg" style="width: 200px;">
    <a href="#" class="echo-thumbnail echo-thumbnail-16to9">
        <img src="https://placehold.jp/360x360.jpg" alt="">
    </a>
</div>

<div class="echo-margin-top-lg" style="width: 200px;">
    <a href="#" class="echo-thumbnail echo-thumbnail-ogimage">
        <img src="https://placehold.jp/360x360.jpg" alt="">
    </a>
</div>

<div class="echo-margin-top-lg" style="width: 200px;">
    <a href="#" class="echo-thumbnail echo-thumbnail-21to9">
        <img src="https://placehold.jp/360x360.jpg" alt="">
    </a>
</div>