picture

画面幅での表示画像指定

詳しい導入事例は導入方法を参照してください。

DEMO

使い方

*-source-*の[srcset]に幅ごとの画像を指定して、[media]に表示幅を指定する。

*-img-*に指定する画像は*-source-*外の画像指定でも、初期読み込み用の低サイズでも良し。

例1 ）*-source-*で[media="(max-width: 768px)"]を指定して、*-img-*で768px超の画像を指定
例2 ）*-source-*で[media="(min-width: 769px)"]と[media="(max-width: 768px)"]を指定して、*-img-*で低サイズ画像を指定

HTML

<picture>
    <source
    srcset="xl.jpg"
    media="(min-width: 769px)">
    <source
    srcset="xm.jpg"
    media="(max-width: 768px)">
    <img class=""
    src="low.jpg"
    alt="">
  </picture>