Katie Hempenius
このデモを試す
サイトをプレビューするには、[アプリを表示] を押してから、[全画面表示]
を押します。サイズの異なるブラウザ ウィンドウでアプリを再読み込みし、ブラウザのサイズに応じて異なる画像が読み込まれ、異なるレイアウトが使用されていることを確認します。
コードを表示する
- これを実現するコードについては、
index.htmlをご覧ください。
<img src="flower.jpg"
srcset="flower-small.jpg 480w, flower-large.jpg 800w"
sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">
一体、どういうことでしょうか。
sizes 属性の値は、画像の表示幅を指定します。幅が 480 ピクセルまでのビューポートでは「ビューポート幅の 100%」、幅が 481 ～ 1,024 ピクセルの画面では「ビューポート幅の 50%」、幅が 1, 024 ピクセルを超える画面では 800 ピクセルになります。これらの幅は、CSS で指定された幅と一致します。
複数のスロット幅を指定できるため、さまざまなビューポート サイズに異なるスタイル（画像の幅）を使用するページ レイアウトに対応できます。
複数のスロット幅を指定する方法
- 複数のスロット幅を指定する場合は、カンマ区切りのリストを使用します。最後の項目を除く各リスト項目は、メディア条件（
max-widthやmin-widthなど）とスロット幅で構成されます。 - このリストの最後の項目は、デフォルトのスロット幅です。これはデフォルトであるため、メディア条件を指定する必要はありません。
- スロット幅は任意の数を指定できます。
srcsetに指定する画像の数は問いません。 スロット幅はさまざまな単位で指定できます。有効な幅は次のとおりです。
100px33vw20emcalc(50vw-10px)
次のような幅は有効ではありません。
25%（サイズ属性ではパーセンテージを使用できません）