picture タグ の使い方

ブラウザの横幅に応じて表示する画像を以下のように変えたい。

• width が 1200px ->
  • 以上のとき hoge.png
  • 以下のとき ->
    • width が 960px ->
      • 以上のとき tablet-hoge.png
      • 以下のとき sp-hoge.png

クラスを当てて対応

pc、 sp のようなクラスを当てて対応する。

(tablet (960px ~ 1200px) の場合はめんどくさくなったので省略)

• width が 960px ->
  • 以上のとき hoge.png
  • 以下のとき sp-hoge.png

を表示する。

//- index.pug

.sample
  img.pc(src="./hoge.png" alt="hoge")
  img.sp(src="./sp-hoge.png" alt="hoge")

// style.scss

$BREAK_POINT_SP: 960px;

@mixin pc {
  @media screen and (min-width: $BREAK_POINT_SP) {
    @content;
  }
}

@mixin sp {
  @media screen and (max-width: $BREAK_POINT_SP) {
    @content;
  }
}

.pc {
  @include sp {
    display: none !important;
  }
}

.sp {
  @include pc {
    display: none !important;
  }
}

picture タグ で対応

pictureタグ を用いて対応する。

• width が 1200px ->
  • 以上のとき hoge.png
  • 以下のとき ->
    • width が 960px ->
      • 以上のとき tablet-hoge.png
      • 以下のとき sp-hoge.png

を表示する。

//- sample.pug

.sample
  picture
    source(media="(min-width: 1200px)" srcset="./hoge.png" alt="hoge")
    source(media="(min-width: 960px)" srcset="./tablet-hoge.png" alt="hoge")
    img(src="./sp-hoge.png" alt="hoge")

pictureタグ を用いるとブラウザの横幅に応じて、簡単に画像を切り替えて表示できることがわかった。

参考

• picture: 画像要素 | MDN