レスポンシブの画像切り替え

Question

http://www.marianaocean.work/sample/index.html
こちらのサイトはレスポンシブで作成しているのですが、
スマホでの画像を切り替えたいです。（今はPCの画像が縦にのびています）

切り替えのためのHTMLとcssを教えていただけると幸いです。

Accepted Answer

ECマスターズの田中です。

> （今はPCの画像が縦にのびています）

ということは、
「RECOMMENDED ITEMS」の直上にある
画像のことを指しておられますでしょうか。

この部分には、スタイルシートにより、
スマートフォンでの閲覧時に高さ400pxとなるよう
設定がされておりますので、

たとえば、画像の切り替えは行わずに、
高さだけを調整していただくのは
いかがでしょうか。

具体的には、
http://www.marianaocean.work/sample/sass/style.scss
の598行目、「@media screen and (max-width: $screen-xs)」に対する規則の中にある
height: 400px;
の値を、たとえば
height: 50vw;
などにご変更の上、表示をご確認いただきますようお願いします。
（値を増減させて、高さを調整していただくことができます）

Answer

ありがとうございます¡