【備忘録】Next.jsのImageコンポーネントを親要素の大きさに合わせて動的に変更する

はじめに

Imageコンポーネントのheightやwidthを親要素の大きさに合わせて動的に変更する方法についての備忘録です。

コード例

親要素の大きさをheight: 300px weight: 500pxとした時のコード例は下記の通りです。

import EnvHubImage1 from "@/public/envhub_1.png";

function ImageComponent() {
    return (
        <div className="h-[300px] w-[500px]">
            <div className="relative h-full w-full">
                <Image 
                    src={EnvHubImage1} 
                    alt="EnvHubのスクリーンショット" 
                    fill 
                    className="object-contain"
                />
            </div>
        </div>
    );
}

記述時のポイント

1.Imageコンポーネントにはfillプロパティを渡す
2.Imageコンポーネントをposition: relative height: 100% width: 100%を与えたdivタグで囲む

理解時のポイント

Imageコンポーネントにfillプロパティを渡すとposition: absoluteが適用されます。
よって、１つ親要素であるposition: absoluteを持つdivタグに張り付くような挙動を取ります。

さいごに

Splideを使う時に必要だった知識なので、後でSplideでどう活用したのかを記載します。