スマホ・PC用の画像をレスポンシブ対応させる方法　超簡単！

2018/04/25

Category :

JavaScript

Tags :

レスポンシブ

レンポンシブサイト作成時にウィンドウサイズにより画像を変更させる方法。
よく使い回すので一度、自分自身も再確認のためまとめる。

CSSのみでも各画像毎に背景画像を指定すると実現できそうだが現実的ではないので出来るだけシンプルなJavaScriptで作成。

サンプルを見る

HTML

イメージは〇〇_sp.jpg(拡張子)、〇〇_pc.jpg(拡張子)として必ず拡張子は揃えてファイル名の最後に_sp/_pcを付加し必要な分を用意。
imgタグのsrcで記述すると必要のないタイプの画像も読み込まれるのでdata-srcにパスを記述。
imgタグのsrcが空だとブラウザによりjsで画像が読み込まれるまでaltが表示されたり不都合があるので透明画像のhack.pngを用意しファーストビュー用の画像サイズも指定（大昔のspacer.gif的なもの）
ウィンドウサイズにより画像を変更したいimgタグはクラス名.sp-pcを付加。
ウィンドウサイズにより異なる各imgサイズをcssで用意してimgタグに必要なクラス名を付加。

<section class="content">
    <h1 class="tit-01">スマホ固定サイズ/PC固定サイズの場合</h1>
    <div class="t-c">
        <img src="./assets/img/hack.png" data-src="./assets/img/logo_pc.png" width="178" height="130" alt="logo" class="sp-pc img-w-310-178">
    </div>
</section>

<section class="content">
    <h1 class="tit-01">スマホ固定サイズ/PC相対サイズの場合</h1>
    <div class="t-c">
        <img src="./assets/img/hack.png" data-src="./assets/img/logo_pc.png" width="178" height="130" alt="logo" class="sp-pc img-w-310-full">
    </div>
</section>

<section class="content">
    <h1 class="tit-01">スマホ相対サイズ/PC固定サイズの場合</h1>
    <div class="t-c">
        <img src="./assets/img/hack.png" data-src="./assets/img/logo_pc.png" width="178" height="130" alt="logo" class="sp-pc img-w-full-178">
    </div>
</section>

<section class="content">
    <h1 class="tit-01">スマホ相対サイズ/PC相対サイズの場合</h1>
    <div class="t-c">
        <img src="./assets/img/hack.png" data-src="./assets/img/logo_pc.png" width="178" height="130" alt="logo" class="sp-pc img-w-full">
    </div>
</section>

</body>直前にjsファイルを読み込むのみでOK。

※Jqueryは各自用意してください。

<script src="./assets/js/responsive-img.js"></script>

CSS

cssで記述するのではなく以下のようにdata属性を用いjsでごにょごにょしようとしたがjs側で余計な処理が増えそうなのでcssで記述する方に変更。

<img src="./assets/img/hack.png" data-src="./assets/img/logo_pc.png" data-sp-w="310" data-sp-h="91" data-pc-w="178" data-pc-h="130" width="178" height="130" alt="logo" class="sp-pc">

以下css。
必要になるサイズ分記述。

.img-w-310-178 {
    width: 310px;
    height: auto;
}

.img-w-310-full {
    width: 310px;
    height: auto;
}

.img-w-full-178 {
    width: 100%;
    height: auto;
}

.img-w-full {
    width: 100%;
    height: auto;
}

@media print,screen and (min-width: 768px) {

    .img-w-310-178 {
        width: 178px;
    }

    .img-w-full-178 {
        width: 178px;
    }

    .img-w-310-full {
        width: 100%;
        height: auto;
    }

}

JavaScript

ウィンドウリサイズ時に毎回関数を呼び出すのではなく処理を軽くするめモードが変更された時のみimgChangeFunc関数を呼び出す。
.sp-pcのクラス名を付加されているimgタグのdata-srcのファイル名を取得してreplace関数で’_pc’, ‘_sp’を置換する。

; /*他のjsファイルで;終了しないといけないのに;がないと困るので*/

$(function() {

    function ResponsiveImgChange() {

        var t = this;
        t.mode = "SP";
        t.oldMode = "FIRST";
        t.winW = $(window).width();
        t.resizeTimer;

        t.imgChangeFunc = function() {
            $('img.sp-pc').each(function() {
                var imgSrc = $(this).attr('data-src'); /*イメージ名取得*/
                if (t.mode == 'SP') {
                    $(this).attr('src', imgSrc.replace('_pc', '_sp'));
                } else if (t.mode == 'PC') {
                    $(this).attr('src', imgSrc.replace('_sp', '_pc'));
                }
            });
        }

        t.resizeFunc = function() {
            t.winW = $(window).width();
            if (t.winW < 768) {
                t.mode = "SP";
            } else {
                t.mode = "PC";
            }
            if (t.mode != t.oldMode) t.imgChangeFunc(); /*モードが違う時のみ画像変更function呼び出し*/
            t.oldMode = t.mode;
        }

        $(window).resize(function() {
            if (t.resizeTimer !== false) {
                clearTimeout(t.resizeTimer);
            }
            t.resizeTimer = setTimeout(function() {
                t.resizeFunc();
            }, 0);
            /*
            モードが違う時のみ画像変更function呼び出しなので
            それ以外はモードチェックのみで処理的には軽いの0で問題ないかと
            気になる方は30から100当たりで設定するとリサイズ時一番最後のみ呼ばれますが
            画像変更にその数値分タイムラグあり
            */
        });

        t.resizeFunc();

    }

    var ric = new ResponsiveImgChange();

});

ペンタゴンのクロノスチェンジばりのカッコいいスマホ用・PC用の画像を用意しましょう！

※ソースの流用、改変は自由ですが自己責任とさせていただきます。

トラックバック URL

https://keprate.com/web/javascript/responsive-img/trackback/

スマホ・PC用の画像をレスポンシブ対応させる方法 超簡単！

HTML

CSS

JavaScript