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%（サイズ [size] 属性では割合を使用できません）