【HTML】ウィンドウの横幅によって表示する画像を切り替えるpictureタグの使い方
ウィンドウの横幅によって表示する画像を切り替える「picture」タグの使い方について、解説していきます。
使用するケース
レスポンシブ対応を行う際に、ウィンドウの横幅によって特定部分の画像を出し分けたい時に使用します。
サンプル
こちらから確認できます。
解説
HTMLのファイルに、下記のように記述します。
<picture>
<source media="(max-width: 767px)" srcset="img2.jpg">
<img src="img1.jpg" alt="">
</picture>まず、通常の「img」タグを、「picture」タグで囲みます。
次に「img」タグの行の直前に、「sourse」のタグを追加し、「sourse」タグの属性に「media」「srcset」をそれぞれ設定します。
「media」属性は、画像を切り替える条件となる横幅の範囲を指定します。
上記例では「max-width:767px」と記述していますが、これは横幅の大きさが「最大767pxのとき（767以下のとき）」という条件が設定されています。
「max-width:○px」・・・最大○pxのとき
「min-width:○px」・・・最小○pxのとき
というように設定することが可能です。
「srcset」属性では、切り替わり後の画像を指定します。
上記例では「img2.jpg」と指定しているので、「media」で設定した条件を満たしているときに画像が「img2.jpg」に切り替わる設定になります。
以上となります。