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

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

ありがとうございます¡

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

カテゴリーから探す