<picture> - ピクチャ

トップ > HTMLリファレンス > <picture>

概要

形式
<picture>~</picture>
サポート
LS / H5.1 / Edge13 / Ch38 / Fx38 / Op25 / Sa9.1
カテゴリ
フローコンテンツ
フレージングコンテンツ
エンベデッドコンテンツ
親要素
エンベデッドコンテンツ を子要素に持てるもの
子要素
0個以上の source 要素とそれに続く 1個の img 要素、スクリプトサポート要素
タグの省略
開始タグ:必須 / 終了タグ:なし
属性
グローバル属性

説明

<picture> はレスポンシブイメージを実現するための要素で、<img> で表示する画像の代わりに、ブラウザの横幅などの条件に従い、他の画像を指定する <source> 要素をグルーピングするために用いられます。使用例を参照してください。

属性

グローバル属性
詳細は グローバル属性 を参照してください。

使用例

下記の例では、表示領域の横幅が 45em 以上の場合は large.jpg を、32em 以上の場合は med.jpg を、それ以下の場合は small.jpg を表示します。

HTML
<picture>
  <source media="(min-width: 45em)" srcset="large.jpg">
  <source media="(min-width: 32em)" srcset="med.jpg">
  <img src="small.jpg" alt="The wolf runs through the snow.">
</picture>

関連項目

<img><source>

リンク


Copyright (C) 2011-2017 杜甫々
初版:2011年6月11日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/video.htm