picture要素を使って読み込む画像を制御する
picture要素
picture要素は、レスポンシブイメージを実現するための要素。
内包されたimg要素とsource要素を組み合わせて複数のイメージソースを出し分けることが可能
img要素はいつも通り使い、source要素には
- media属性にブレイクポイントを指定
- srcset属性に読み込む画像のパスを指定
して使います
仕様上の注意点は
- picture要素の最後にimg要素を入れるように
- source要素を各順番
になります
簡単にmax-widthを使ったときの使用例
|
1 2 3 4 5 |
<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」が読み込まれます
簡単にmin-widthを使ったときの使用例
|
1 2 3 4 5 |
<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」が読み込まれるようになります
