レスポンシブ画像 | Articles | web.dev

レスポンシブ画像のブレークポイントを考慮する 多くの場合、サイトのレイアウト ブレークポイントに応じて画像サイズが変更されることがあります。たとえば、小さい画面ではビューポートの幅全体に画像を表示させ、大きい画面では割合を小さくする必要があります。 <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 ピクセルを超える

[hiroaki0916]

レスポンシブ制作時の画像指定方法

[yaoki_dokidoki]

勉強しよう

[piano-kanrinin]

“picture 要素”