img要素の width, height 属性新仕様と srcset を同時に使ってみる (2020年) その2

Created:

1. このページの目的

img要素の width, height 属性がアスペクト比を取得するために利用されるようになった。この属性と srcset 属性を同時に使ってする。(2020年)

その2では、srcset で x単位を使用する

2. Demo

現在使用中のデバイスのデバイスピクセル比:

使用するウェブブラウザ

(1) Demo 1

srcset属性で x単位を使う。

HTML

<img id="img1" src="c-200.png" alt=""
     width="200" height="186"
     srcset="c-100.png 0.5x,
             c-200.png 1x,
             c-300.png 1.5x,
             c-400.png 2x">

CSS

#img1 {
  max-width: 100%;
  height: auto;
}

(2) Demo 2

同じことを、大きめ画像で試す。

HTML

<img id="img2" src="sample-1x.jpg" alt=""
    width="1920" height="1200"
    srcset="sample-960.jpg 0.5x,
            sample-1920x.jpg 1x">

CSS

#img2 {
  max-width: 100%;
  height: auto;
}

3. 結論