レスポンシブ対応の画像切り替えはこれで大丈夫。

レスポンシブ対応の画像切り替えはこれで大丈夫。


開発

昨日の続き。

Chromeのsrcsetで誤解していた。 – モノグサにお灸
参考
Chromeのsrcsetで誤解していた。 – モノグサにお灸

ウィンドウサイズに応じて画像を切り替えるsrcset。 コードはこんな感じ。 モノグサにお灸

画面サイズに応じて画像を切り替えたいなー、と思っていたのですが

ブレークポイントを指定して画像を切り替える方法
参考
ブレークポイントを指定して画像を切り替える方法

<picture>とsrcsetを使用して、画面サイズに応じて画像を切り替える方法です。レティーナにも対応しています。このサンプルではIE用にPicturefillを追加しています。

Design Link Work

これね。
これで解決。

今日はここまで
レスポンシブ対応の画像切り替えはこれで大丈夫。

レスポンシブ対応の画像切り替えはこれで大丈夫。


開発

昨日の続き。 画面サイズに応じて画像を切り替えたいなー、と思っていたのですが これね。 これで解決。


関連する記事



こちらはいかが?


Chromeのsrcsetで誤解していた。
Chromeのsrcsetで誤解していた。

ウィンドウサイズに応じて画像を切り替えるsrcset。 コードはこんな感じ。 <img sizes="100vw" srcset=" https://dummyimage.com/24…

コメントを残す