picture要素
picture要素を実現するための要素です。
picture要素は、まだHTML5としては定義されておらずHTML5 extensionとして策定がすすめられており、picture要素に対応したブラウザは執筆時点では存在しません(2014年4月)。
画像を表示したい箇所にimg要素ではなくpicture要素を利用することで表示する画像を制御することができます。
picture要素は1個以上のsource要素と必要であれば１個のimg要素をフォールバックとして利用でき、表示する画像はsouce要素上にmedia属性を利用して記述します。
以下のサンプルではブラウザ幅が45em以上の場合はlarge-1.jpgを、ブラウザ幅が18em以上の場合はmed-1.jpgを、それ以外の場合はsmall-1.jpgを表示します。
<picture width="100" height="100">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
</picture>属性としてはグローバル属性の他にwidth属性とheight属性を取ることができます。
参考URL
登録日 : 2014年04月16日 最終更新日 : 2014年4月16日