案2.幅に合わせた寸法での表示（Viewport-based Selection）

案2-A-1.Viewport幅

srcset属性 に w記述子 を使用
・sizes属性は未指定、あるいは、"100vw"を指定

▼HTML

<img

 sizes="100vw"

 srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"

 alt="画像の説明">

・1.A-1. srcset属性、w記述子 ／ 幅に合わせた寸法での表示（Viewport-based Selection）

---

案2-A-2.Viewport幅

srcset属性 に w記述子 を使用
・sizes属性　… "★★vw"を指定

▼HTML

<img src="img-200.jpg" sizes="50vw" srcset="img-100.jpg 100w, img-200.jpg 200w, img-400.jpg 400w, img-800.jpg 800w, img-1000.jpg 1000w, img-1400.jpg 1400w, img-1800.jpg 1800w">

・A-2. srcset属性、w記述子 ／ 画像サイズを相対値で指定

---

案2-A-3.Viewport幅

srcset属性 に w記述子 を使用
・sizes属性　… "(min-width: ☆☆px) ★★vw"を指定


800px以上 … 50vw、それ以外 … 100vw
▼HTML

<img 

   sizes="(min-width: 800px) 50vw, 100vw"

   srcset="./images/200w.png 200w, ./images/375-500.jpg 375w, ./images/400w.png 400w, ./images/480-640.jpg 480w, ./images/600w.png 600w, ./images/768-1024.jpg 768w, ./images/800w.png 800w, ./images/1000w.png 1000w, ./images/1200w.png 1200w" alt="画像の説明">

・A-3.sizes属性、min-width属性、vw ／ レスポンシブ画像におけるブレークポイントの効果


600px以上 … 25vw、500px以上 … 50vw、それ以外 … 100vw
▼HTML

<img src="400.png"

         sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"

         srcset="100.png 100w, 200.png 200w, 400.png 400w,

                 800.png 800w, 1600.png 1600w, 2000.png 2000w">

・A-3.sizes属性、min-width属性、vw ／ レスポンシブ画像におけるブレークポイントの効果


1140px以上 … 570px、640px以上 … 50vw、それ以外 … 100vw
▼HTML

<img

 sizes="(min-width: 1140px) 570px, (min-width: 640px) 50vw, 100vw"

 srcset="img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w"

 alt="画像の説明">

・1.A-3.sizes属性、min-width属性、vw ／ 幅に合わせた寸法での表示（Viewport-based Selection）