目次

    assetsファイル内に保存した画像ファイルはassetimgurlタグを使用して、以下のように呼び出すことができます。 上記の場合はassetsファイルに入っている《main-img.png》の画像をwidth:250px × height:250pxで表示することができます。

    画像サイズの指定

    先ほどのコード内の'250x250'部分を変更することで、様々なサイズを指定することも可能です。
    指定用のコードは以下の通りです。

    横幅と高さを両方指定

    < img src="{{ 'main-img.png' | asset_img_url: '250x250' }}" alt="">

    width×heightで画像のサイズを指定することが出来ます。

    横幅のみを指定


    widthのみを指定することができます。
    上記の場合、heightはautoとなり画像比率に合わせて自動で高さが算出されます。

    高さのみを指定

    < img src="{{ 'main-img.png' | asset_img_url: 'x250' }}" alt="">

    heightのみを指定することができます。
    上記の場合、widthはautoとなり画像比率に合わせて自動で横幅が算出されます。

    規定の画像サイズを指定

    Liquidでは、いくつかの規定サイズが用意されています。
    サイズを統一したい画像などは規定サイズを使用すると便利です。

    pico 16px × 16px

    < img src="{{ 'main-img.png' | asset_img_url: 'pico' }}" alt="">


    icon 32px × 32px

    < img src="{{ 'main-img.png' | asset_img_url: 'icon' }}" alt="">


    thumb 50px × 50px

    < img src="{{ 'main-img.png' | asset_img_url: 'thumb' }}" alt="">


    small 100px × 100px

    < img src="{{ 'main-img.png' | asset_img_url: 'small' }}" alt="">


    compact 160px × 160px

    < img src="{{ 'main-img.png' | asset_img_url: 'compact' }}" alt="">


    medium 240px × 240px

    < img src="{{ 'main-img.png' | asset_img_url: 'medium' }}" alt="">


    large 480px × 480px

    < img src="{{ 'main-img.png' | asset_img_url: 'large' }}" alt="">


    grande 600px × 600px

    < img src="{{ 'main-img.png' | asset_img_url: 'grande' }}" alt="">


    original 1024px × 1024px

    < img src="{{ 'main-img.png' | asset_img_url: 'original' }}" alt="">


    master 実サイズ

    < img src="{{ 'main-img.png' | asset_img_url: 'master' }}" alt="" >

    ※assetsファイルに保存したそのままのサイズで表示されます。

    まとめ

    またド忘れした際に訪れていただけますと嬉しいです。

    PREV
    2022.09.12
    Vue.js で開発使用する技術まとめ
    NEXT
    2022.09.12
    話題のBunを使ってみた