HTMLの `picture`タグ

画像とHTMLの操作の基本をご覧くださいpictureタグ、およびそれらを応答させる方法

HTMLは私たちにpictureタグ、これは非常によく似た仕事をしますsrcsetの属性imgタグ、そして違いは非常に微妙です。

あなたが使うpictureファイルの小さいバージョンを提供するだけでなく、完全に変更したい場合。または、別の画像形式を提供します。

私が見つけた最良の使用例は、まだ広くサポートされていない形式であるWebP画像を提供する場合です。の中にpictureタグを付けると、画像のリストが指定され、それらが順番に使用されるため、次の例では、WebPをサポートするブラウザーが最初の画像を使用し、そうでない場合はJPGにフォールバックします。

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="An image">
</picture>

ザ・sourceタグは、画像の1つ（または複数）の形式を定義します。ザ・imgタグは、ブラウザが非常に古く、をサポートしていない場合のフォールバックです。picture鬼ごっこ。

の中にsource内部のタグpictureあなたは追加することができますmediaメディアクエリを設定する属性。

次の例は、上記の例のように機能します。srcset：

<picture>
  <source media="(min-width: 500w)" srcset="dog-500.png" sizes="100vw">
  <source media="(min-width: 800w)" srcset="dog-800.png" sizes="100vw">
  <source media="(min-width: 1000w)" srcset="dog-1000.png"	sizes="800px">
  <source media="(min-width: 1400w)" srcset="dog-1400.png"	sizes="800px">
  <img src="dog.png" alt="A dog image">
</picture>

しかし、それはそのユースケースではありません。ご覧のとおり、はるかに冗長だからです。

ザ・pictureタグは最近ですが、現在はサポートされていますOpera MiniとIE（すべてのバージョン）を除くすべての主要なブラウザによる。

私の無料ダウンロードHTMLハンドブック


その他のhtmlチュートリアル：


Tech Wiki Online！