<picture> - ピクチャ - とほほのWWW入門

<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