pictureタグに要注意！

html関連
2023年1月12日

PC用とスマホ用で表示される画像を切り替えたくて、そんな時に簡単なpcitureタグを使用したらiPhoneでうまく切り替わらずちょっと苦戦したので覚書き。
結論から言うとmediaクエリの指定をsrcsetの前に置くこと。以下参照。

<figure>
<picture>
<source media="(min-width: 769px)" srcset="https://kureai.info/kureai_site/wp-content/uploads/2023/01/HTK_9902-Edit_2023NENGA.jpg">
<img src="https://kureai.info/kureai_site/wp-content/uploads/2023/01/HTK_9902-Edit_2023NENGA_sp.jpg" alt="2023"  >
</picture>
</figure>

sourceのあとに直ぐmedia指定すること。srcsetはその後でないとうまく表示されなかった。
Googleで調べてもmediaを最初に記載する例は出てこなかったので謎なのだが、他の方々はうまく表示されているんだろうか？それともWordpress内での使用に問題があるのかな？
まぁとりあえず問題なく表示はできているのでOK。

PAGE TOP