レスポンシブ画像内のブレークポイントを考慮する 多くの場合、画像サイズはサイトのレイアウト ブレークポイントに応じて変わります。たとえば、小さな画面では画像をビューポートの幅全体に表示し、大画面ではその割合を小さくする必要があります。 <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" alt="an example image"> 試してみる 上記の例の sizes 属性では、複数のメディアクエリを使用して画像のサイズを指定しています。ブラウザの幅が 600 ピクセルを超える場合、画像は