CodeNote.net

[CSS] Desktop, Mobile で違う画像に切り替えるサンプルコード

Tadashi Shigeoka ·  Thu, June 18, 2020

HTML, CSS という Web 技術だけで Desktop, Mobile で違う画像に切り替えるサンプルコードをご紹介します。

HTML5 CSS3

背景 PC, スマホで画像を切り替えたい

HTML と CSS だけで、ディスプレイサイズによって画像を切り替えた、完成形は以下のような感じです。

? https://codenote-net.github.io/sandbox/responsive-img/index.html

CSS だけで PC, スマホで画像を切り替える サンプルコード

CSS

.pc {
  display: block !important;
}
.sp {
  display: none !important;
}

@media only screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
  .sp {
    display: block !important;
  }
}

HTML

<img class="pc" src="2560x6000.png" width="100%" />
<img class="sp" src="1242x5200.png" width="100%" />

サンプルコードは以下の GitHub Pull Request に公開していますので、ぜひご覧ください。

? Desktop, Mobile で違う画像に切り替えるサンプルコード · Pull Request #10 · codenote-net/sandbox

以上、HTML、CSS だけで Desktop, Mobile で違う画像に切り替えた、現場からお送りしました。