Katie Hempenius
デモをお試しください
- サイトをプレビューするには、[アプリを表示] を押します。[
全画面表示
。 - さまざまなブラウザサイズを使用してアプリを再読み込みします。ご覧のとおり、画像と サイズだけでなく切り抜き方や アスペクト比。
一体、どういうことでしょうか。
アート ディレクション さまざまなディスプレイ サイズでさまざまな画像を表示します。
レスポンシブ画像では、同じサイズの異なる画像が読み込まれます。アート ディレクションは さらに一歩進んで、画像の状態に応じてまったく異なる画像を 表示されます。
アート ディレクションを使用して、視覚的なプレゼンテーションの質を高める。たとえば、 このデモでは、画像のトリミングによってスポット（花）が 表示に関係なく常に詳細が表示されます。アート ディレクションのメリット 単なる見た目の美しさレスポンシブ画像と比べてパフォーマンス上のメリットはありません。
コードを表示する
- このデモのアート ディレクションのコードを確認するには、
index.htmlをご覧ください。
コードの仕組み
アート ディレクションでは、
<picture>
<source>,
と <img> タグを使用します。
画像
<picture> タグは、0 個以上の <source> タグと 1 つの <image> タグのラッパーとなります。
source
<source> タグは、メディア リソースを指定します。
ブラウザは、最初の <source> タグをメディアクエリとともに使用します。
true を返します。一致するメディアクエリがない場合は、
ブラウザは、<img> で指定された画像を読み込みにフォールバックします。
インスタンスにしか適用できません
img
<img> タグを指定すると、このコードが
<picture> タグをサポートしています。
ブラウザが <picture> タグをサポートしていない場合は、
<img> タグで指定されたイメージ。