Cover Image for next/image で Masonry レイアウトを実現するのは難しい

next/image で Masonry レイアウトを実現するのは難しい

シリーズ：技術ブログ制作日記
blogtailwindcssNext.js

概要

をみて、ブログの記事一覧を Masonry レイアウトにしようと思ったが next/image で実現するのは難しかったので img タグで普通に実装した

2022-08-15追記
next/image でも実現できた -> next/image で Masonry レイアウトを実現

出来上がったもの

調査結果

  • tailwind で Masonry レイアウトを実現するのは簡単
    • 問題は next/image
  • next/image は CLS を避けるために、width / height を事前に設定するのを推奨している
    • 今回のようにサイズがわからない画像を表示する場合に、layout='fill' とobjectFit='contain' を設定する方法はある
    • ただその場合は親コンテナに width / height どちらか設定しておく必要があるため、Masonry レイアウト には向かなそう
  • 結論： 誰か詳しい人実現方法を教えてください

参考