Weblasts

picture要素を使って読み込む画像を制御する

picture要素

picture要素は、レスポンシブイメージを実現するための要素。
内包されたimg要素とsource要素を組み合わせて複数のイメージソースを出し分けることが可能
img要素はいつも通り使い、source要素には

  • media属性にブレイクポイントを指定
  • srcset属性に読み込む画像のパスを指定

して使います

仕様上の注意点は

  • picture要素の最後にimg要素を入れるように
  • source要素を各順番

になります

簡単にmax-widthを使ったときの使用例

HTML

<picture>
    <source media="(max-width:500px)" srcset="b.jpg">
    <source media="(max-width:700px)" srcset="c.jpg">
    <img src="a.jpg" alt="">
</picture>

どう動くの?

picture要素のを上記のように組むとブラウザの画面幅が
500px以下の時は「b.png」が読み込まれ
501px以上、700px以下の時は「c.png」が読み込まれ
701px以上の時には基準の「a.png」が読み込まれます
一応画像に注意点とともにまとめました

SAMPLE


簡単にmin-widthを使ったときの使用例

HTML

<picture>
    <source media="(min-width:700px)" srcset="b.jpg">
    <source media="(min-width:500px)" srcset="c.jpg">
    <img src="a.jpg" alt="">
</picture>

picture要素のを上記のように組むとブラウザの画面幅が
499px以下の時は基準の「a.png」が読み込まれます
500px以上、699px以下の時は「c.png」が読み込まれ
700px以上の時は「b.png」が読み込まれるようになります
これも一応画像にまとめました

sample


とりあえずデモ

sample51

viewport入れないとうまく動かなさそう

Recommend Post