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