<picture> - ピクチャ

目次

概要
説明
属性
使用例
関連項目
リンク

概要

形式: <picture>～</picture>
サポート: https://caniuse.com/picture
カテゴリ: フローコンテンツ; フレージングコンテンツ; エンベデッドコンテンツ
親要素: エンベデッドコンテンツを子要素に持てるもの
子要素: 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日

https://www.tohoho-web.com/html/picture.htm