[next js 2023版] next/imageコンポーネントでwidthとheightを指定せず画像をフレキシブルに表示する方法 (100%)

記事を書こうと思った背景

他の方のqiitaの記事※ではnext/imageで調べると、{objectFit}や{layout}等の非推奨プロパティを使用している例が多いのでnext.jsの最新版として書きたいと思います。

(※ 2023年2月を起点に1年以内で検索した記事)
(非推奨プロパティでも同じ動作をします)

実際のコード

image.tsx

import Image from "next/image";

 {/* ...省略 */}

<div style={{ position: "relative", height: "300px" }}>
  <Image
    alt="株式会社viviONでは二次元コンテンツを愛するエンジニアを絶賛募集中です！"
    src="https://vivion.jp/recruit/"
    fill
    style={{ objectFit: "cover" }}
  />
</div>

コード解説

fillを指定するとデフォルトでスタイルがposition: absoluteになるので、親の要素はrelativeを指定しましょう。
objectFitにcoverを指定することでグニャッとした比率にならず、見切れてる部分は表示しないようよしなにやってくれます。

非推奨の背景

あくまで推測ですが、非推奨になった理由としてstyleで指定できるものをわざわざプロパティにするのは冗長だと判断したのではないでしょうか。
ドキュメントのSee also:の遷移先もmozillaのCSSドキュメントでした。

Docのスクリーンショット

採用PR

gRPCやマイクロサービス化・二次元コンテンツに興味がある、もしくはチャレンジしてみたいという方は是非一緒に働きましょう！