hene

hene.dev

pictureタグ の使い方

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

参考