WEB制作(html・css(スタイルシート))に関する各種メモ書き

HTML5の画像のsourceタグのsrcset で「ブラウザ幅」と「ディスプレイ解像度」によって画像を入れ替える

● 画像の srcset で「ブラウザ幅」と「ディスプレイ解像度」によってレスポンシブに画像を入れ替える

以下のように記述すると「ブラウザ幅」と「ディスプレイ解像度」によってレスポンシブに画像を入れ替わります

<picture>
    <source srcset="img/600.png 1x , img/600@2x.png 2x" media="(min-width: 600px)" />
    <source srcset="img/500.png 1x , img/500@2x.png 2x" media="(min-width: 500px)" />
    <source srcset="img/400.png 1x , img/400@2x.png 2x" media="(min-width: 400px)" />
    <source srcset="img/300.png 1x , img/300@2x.png 2x" media="(min-width: 300px)" />
    <img src="img/default.png" alt="image with artdirection" />
</picture>

ポイントとしては大きい解像度の画像から指定することです。 小さい画像から指定するとうまく表示されません。

● デモはこちら

https://pgmemo.tokyo/livedemo/html5_source_srcset/test_img_source_srcset.html

● sourceタグの srcset を Windows IE11 に対応させる

picturefill を使用します。こちらを読み込ませるだけでOK。

    <script src="//cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.2/picturefill.min.js"></script>

● デモはこちら

https://pgmemo.tokyo/livedemo/html5_source_srcset/test_img_source_srcset_IE11.html

関連エントリー

No.1293
09/10 16:16

edit

html5