# picture タグ の使い方

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

  • width1200px ->
    • 以上のとき hoge.png
    • 以下のとき ->
      • width960px ->
        • 以上のとき tablet-hoge.png
        • 以下のとき sp-hoge.png

# クラスを当てて対応

pcsp のようなクラスを当てて対応する。

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

  • width960px ->
    • 以上のとき 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タグ を用いて対応する。

  • width1200px ->
    • 以上のとき hoge.png
    • 以下のとき ->
      • width960px ->
        • 以上のとき 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タグ を用いるとブラウザの横幅に応じて、簡単に画像を切り替えて表示できることがわかった。

# 参考