初めまして！
見習いコーダーのSACHIです！
今回はレスポンシブ対応の画面のサイズに合わせた画像の切り替えの仕方をやっていきたいと思います！
ポイントは、イメージの横幅を指定してあげることと、display要素の切り替えになっていきます。
まず今回はPC用の画像とスマホ用の画像を２種類用意しました！
【PC用画像】
img1.png (1280px×1080px)
【スマホ用画像】
img2.png (640px×1136px}
まずは、HTMLを記述していきましょう！
【HTML】
<div class="pc_img"><img src="img/img1.png"></div><div class="sp_img"><img src="img/img2.png"></div>
ブラウザで確認すると縦に２つの画像が縦並びに表示されます。↓↓↓
imgに横と縦の指定をしていきましょう。
【CSS】
img {width: auto;max-width: 100%;height: auto;}それでは、CSSでPCの画像をdisplay:inline-block;、スマホの画像にはdisplay:none;をつけて非表示にしましょう。
【CSS】
.pc_img img{display:inline-block;/*PC画像を表示する*/}.sp_img img{display:none;/*スマホ画像は非表示にする*/}そうすると、スマホ画面が見えなくなります！
無事PC画面でスマホ画像が表示されなくなりました。
次に両方のimgにメディアクエリを使い、640pxを境にして画像を切り替えるCSS記述をしていきたいと思います！
PC画像にはdisplay:none;、スマホ画像にはdisplay:inline-block;です。
.pc_img img{display:inline-block;/*PC画像を表示する*/}.sp_img img{display:none;/*スマホ画像は非表示にする*/}@media screen and (max-width: 640px) {.pc_img img {display: none;/*PC画像は非表示する*/}.sp_img img {display:inline-block;/*スマホ画像を表示する*/}}まずは、PC画面のサイズで確認しましょう。
ちゃんと表示されていますね！
では、スマートフォンで確認してみましょう！
バッチリ切り替わりましたね！
記述も簡単なのでぜひ試してみてください。