前提・実現したいこと
dream weaverを使用し、レスポンシブ 対応のウェブサイトを作成しています。
slickを使い、100vw,100vhで画面いっぱいのスライドショーを作成しようと思っています。
その際にスマホ版の時とpc版の時で画像が荒くなるのを避けるため画像を切り替えたいです。
発生している問題・エラーメッセージ
srcsetを使用し、ビューポート幅に合わせて画像切り替えできるとあったので試してみたのですが、
srcsetが読み込まれず切り替わりません。
該当のソースコード
<header> <div> <ul class="slider"> <li><a href="#"><img srcset="img/header1-pc.jpg 1440w, img/header-sp 400w" src="img/header1_pc.JPG" alt="###" class="header-sp"></a></li> <li><a href="#"><img src="img/header2_sp.jpg" srcset="img/header2_sp.jpg 480w,img/header2_pc.jpg 1000w" alt="###" class="header-sp"></a></li> <li><a href="#"><img src="img/header3_sp.jpg" srcset="img/header3_sp.jpg 480w,img/header3_pc.jpg 1000w" alt="###" class="header-sp"></a></li> </ul> </div></header>
試したこと
画像を切り替えたかったので、srcsetの他にdisplay:noneを使いsp専用の画像をpcの時に消してみたりと
自分なりに試行錯誤して見たのですが、どれも実行できなかったのでこちらで質問させていただきます。よろしくお願いします。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。