【要素】picture要素

picture要素とは

• その要素内のimg要素に対して複数のリソースを指定するための要素

• picture要素内のsource要素のmedia属性に指定した、viewportの横幅などの条件に応じて、使用すべきリソースを切り替えることができる。
• picture要素内に、source要素で表示候補となる画像データを必要数配置し、最後にimg要素を配置する。　※img要素をsource要素の前に配置すると、画像の切り替えが行われなくなる。順番に注意！　　　　　
• picture要素に未対応のブラウザではimg要素の画像のみが表示される

サンプルコード