hitode909の日記

趣味はマリンスポーツですの日記です

HTML5のpicture要素を使ってブラウザの幅と関係なく眠いのを我慢している全然効率的でない男性を出す

ブラウザの幅を変えるとさまざまな眠いのを我慢している全然効率的でない男性が出てきてたのしい!!

解説

HTML5のpicture要素を使っています.
developer.mozilla.org

こんなかんじ.
スマホで見るときは,画面を横にすると何か変わるかもしれない.

<picture>
  <source media="(min-width: 1450px)" srcset="//lh3.googleusercontent.com/-S_m9OixeJuI/V1_D1PsLAWI/AAAAAAABL-g/r4rj0cNH_gATzO1wFXGNzsmnEPAPcRXLQCKgB/s1024/IMG_0192.JPG">
  <source media="(min-width: 1400px)" srcset="//lh3.googleusercontent.com/-ILHgX6OxywE/V1_D1MmlI4I/AAAAAAABL-g/iW3ErHk9TfgkLXQcywRQcFT_z4JUYZSNgCKgB/s1024/IMG_0191.JPG">
  (中略)
  <source media="(min-width: 300px)" srcset="//lh3.googleusercontent.com/-VGhhjfmrLuA/V1_D1C6rTUI/AAAAAAABL-g/5sGOjcA2BVEQR7kq5-olFyFu5zcxqh5RACKgB/s1024/IMG_0169.JPG">
  <img src="//lh3.googleusercontent.com/-VGhhjfmrLuA/V1_D1C6rTUI/AAAAAAABL-g/5sGOjcA2BVEQR7kq5-olFyFu5zcxqh5RACKgB/s1024/IMG_0169.JPG" style="width: 100%">
</picture>