複数のスロット幅の指定

Katie Hempenius
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-widthmin-width など)とスロット幅で構成されます。
  • このリストの最後の項目は、デフォルトのスロット幅です。これはデフォルトであるため、メディア条件を指定する必要はありません。
  • スロット幅はいくつでも指定できます。srcset に指定する画像の数は問いません。
  • スロット幅はさまざまな単位で指定できます。有効な幅は次のとおりです。

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

以下は有効な幅ではありません。

  • 25%(サイズ [size] 属性ではパーセンテージを使用できません)