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

09/19/202002/06/2021

とらいく

画面サイズに合わせて画像サイズを変更

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

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

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

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

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

デモ

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

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

ソースコード


<img src="[ここに画像リンク]_pc.jpg" alt="" style="width: max-content;" class="switch">

画像保存は必ず語尾にパソコンで表示する場合は『_pc』。
スマホで表示したい場合は『_sp』と付けて、保存しましょう。

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

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


// 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();
});
});