HTMLの<picture>タグ

例

<picture> タグの使用方法:

<picture> 
  <source media="(min-width:650px)" srcset="/i/photo/flower-4.jpg"> 
  <source media="(min-width:465px)" srcset="/i/ photo/tulip.jpg"> 
  <img src="/i/photo/flower.gif" alt="花" style="width:auto;"> 
</picture>

定義と使用法

<picture> タグを使用すると、Web 開発者は画像リソースをより柔軟に指定できるようになります。

<picture> 要素の最も一般的な用途は、レスポンシブ デザインのアート ディレクションです。ビューポートの幅に基づいて 1 つの画像を拡大縮小する代わりに、ブラウザのビューポートをより適切に埋めるように複数の画像を設計できます。

<picture> この要素には、1 つ以上の <source> タグと <img> タグの 2 つのタグが含まれています。

ブラウザは、現在のビューポートの幅に一致するメディア クエリを持つ最初の <source> 要素を検索し、正しい画像 (srcset 属性で指定された) を表示します。<img> 要素は <picture> 要素の最後の子であり、ソース タグが一致しない場合のフォールバックとして機能します。

ヒント: <picture> 要素は次のように動作します。