next/imageでの高さ100%設定

Next.jsのnext/imageコンポーネントで画像の高さを100%に設定する際によく遭遇する問題とその解決方法について解説します。

問題点

next/imageコンポーネントを使用して画像の高さを100%に設定しようとすると、以下のようなエラーが発生することがあります：

Error: Image with src "/deco.svg" must use "width" and "height" properties or "unsized" property.

これはドキュメントではlayout="fill"を使用する場合にwidthとheightが不要とされているにもかかわらず発生するため、混乱を招きます。

解決方法

方法1: fillプロパティを使用する（推奨）

親要素をposition: relativeに設定し、Imageコンポーネントにfill={true}を設定します：

jsx

<div className="relative h-full w-full">
  <Image
    src="/deco.svg"
    alt="説明文"
    fill={true}
    style={{ objectFit: "cover" }}
  />
</div>

必要なCSS

css

.relative {
  position: relative;
}

.h-full {
  height: 100%;
}

.w-full {
  width: 100%;
}

TIP

objectFitプロパティは以下の値を取ります：

cover: アスペクト比を保ちながらコンテナを埋める
contain: 画像全体が表示されるように調整
fill: コンテナに合わせて歪める

方法2: スタイルを使用する

Next.js 13.5以上では、以下の方法も有効です：

jsx

<Image
  src="/deco.svg"
  alt="説明文"
  width={0}
  height={0}
  sizes="100vw"
  style={{ width: '100%', height: 'auto' }}
/>

方法3: 外部画像の場合

外部URLから画像を読み込む場合：

jsx

<div className="relative h-[300px] w-full">
  <Image
    src="https://example.com/image.jpg"
    alt="説明文"
    fill
    className="object-cover"
  />
</div>

よくある間違いと解決策

WARNING

以下の方法は非推奨または正しく動作しない可能性があります

非推奨なlayoutプロパティ:

jsx

// 非推奨
<Image layout="fill" ... />

// 推奨
<Image fill ... />

スタイルの適用方法:

jsx

// 非推奨: 直接スタイルを適用
<Image style={{ height: '100%' }} ... />

// 推奨: 親要素とfillプロパティを組み合わせる
<div style={{ position: 'relative', height: '100%' }}>
  <Image fill ... />
</div>

完全な使用例

Reactコンポーネントスタイル

jsx

import Image from 'next/image';

export default function FullHeightImage() {
  return (
    <div className="container">
      <div className="image-wrapper">
        <Image
          src="/deco.svg"
          alt="デコレーション画像"
          fill
          style={{ 
            objectFit: 'cover',
            objectPosition: 'center'
          }}
        />
      </div>
    </div>
  );
}

css

.container {
  width: 100%;
  height: 500px; /* 任意の高さ */
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

まとめ

next/imageで高さ100%を実現するには：

親要素にposition: relativeと高さの設定
Imageコンポーネントにfillプロパティを追加
必要に応じてobjectFitで画像の調整を行う

この方法で、レスポンシブで高さ100%の画像を簡単に実装できます。

INFO

Next.jsのバージョンによって挙動が変わる可能性があるため、常に最新の公式ドキュメントを確認することをお勧めします。

関連記事

next/imageでの高さ100%設定 ​

問題点 ​

解決方法 ​

方法1: fillプロパティを使用する（推奨） ​

必要なCSS ​

方法2: スタイルを使用する ​

方法3: 外部画像の場合 ​

よくある間違いと解決策 ​

完全な使用例 ​

まとめ ​