Webコーティング

【コピペで簡単】パソコンとスマホで画像のサイズを変更する方法・仕方【レスポンシブ】

TRYKMAGAZINE
トライクマガジン
画面サイズに合わせて画像サイズを変更

今回は、デバイスごとに画像サイズを変更するHTMLJavascriptをご紹介します。

人気の高いコンテンツサイトやECサイトなどで使われていることが多く、デバイスによって画像が変更されるため閲覧者に見やすいバナーや画像を提供できます。

ぜひ、参考にしてみてください。

パソコンとスマホで切り替えるメリット

  • デバイスに適した画像サイズで見やすくなる
  • 極端に大きかったり、小さいなんてことはない
  • スライドなどで使える

デモ

画面の幅を変更してみてください!

画面中央の文字がパソコンならPC、スマホならSPと切り替わっているはずです。

ソースコード


<img src="[ここに画像リンク]_pc.jpg" alt="" style="width: max-content;" class="switch">        
画像保存は必ず語尾にパソコンで表示する場合は『_pc』。
スマホで表示したい場合は『_sp』と付けて、保存しましょう。

ソースコードのルールHTMLのソースコード

  1. パソコンで表示させたいものを「_pc.jpg」で画像を保存
  2. スマホで表示させたいものを「_sp.jpg」で画像を保存
  3. [ここに画像リンク]という部分に画像を呼び出す
  4. classタグはJavascriptと連動しているため変更する時は両方一緒に変える
  5. 注意点:同じ階層またはフォルダに画像を格納しなければならない

// switch
jQuery(function ($) {
var $setElem = $('.switch'),
pcName = '_pc',
spName = '_sp',
replaceWidth = 640;

$setElem.each(function () {
var $this = $(this);
function imgSize() {
if (window.innerWidth > replaceWidth) {
$this.attr('src', $this.attr('src').replace(spName, pcName)).css({ visibility: 'visible' });
} else {
$this.attr('src', $this.attr('src').replace(pcName, spName)).css({ visibility: 'visible' });
}
}
$(window).resize(function () { imgSize(); });
imgSize();
});
});
            
        

ソースコードのルールJavascriptのソースコード

  1. replaceWidth = 640; ⇒ 画面幅のサイズ

様々なコンテンツで活用できると思うので、ぜひ使ってみてください。

ライターからひとこと

今回は『HTML』と『javascript』を活用した画像サイズ変更の仕方について解説しました。
レスポンシブに対応しているため、ユーザーに見やすい画像を瞬時に切り替えてくれます。

ECサイトはもちろん、どんなサイトにも使えるのでぜひうまく活用してください。