Next.jsエンジニアが知っておくべきnext/imageコンポーネント：高さを100%に設定して、パフォーマンスとデザインを両立

2024-05-21

Next.jsにおけるnext/imageコンポーネントのの高さを100%に設定する方法

layoutプロパティは、next/imageコンポーネントのレンダリング方法を制御します。高さを100%に設定するには、layoutをfillまたはresponsiveに設定できます。

import Image from 'next/image';

<Image
  src="/image.jpg"
  alt="My image"
  layout="fill"
/>

objectFitプロパティは、画像がコンテナ内にどのように収まるかを制御します。高さを100%に設定するには、objectFitをcoverに設定できます。

import Image from 'next/image';

<Image
  src="/image.jpg"
  alt="My image"
  objectFit="cover"
/>

widthとheightプロパティを使用して、画像の寸法を明示的に設定することもできます。ただし、この方法を使用すると、アスペクト比が維持されない可能性があることに注意してください。

import Image from 'next/image';

<Image
  src="/image.jpg"
  alt="My image"
  width={100}
  height={100}
/>

CSSを使用して、next/imageコンポーネントの高さを100%に設定することもできます。

.image {
  height: 100%;
}

import Image from 'next/image';

<Image
  src="/image.jpg"
  alt="My image"
  className="image"
/>

補足

layoutプロパティを使用する場合は、親コンテナにwidthとheightを設定する必要があります。
objectFitプロパティを使用する場合は、画像が切り取られる可能性があることに注意してください。

これらの方法はそれぞれ異なるトレードオフがあるため、要件に応じて最適な方法を選択する必要があります。

Next.jsにおけるnext/imageコンポーネントの高さ設定 - サンプルコード

layoutプロパティを使用する

import React from 'react';
import Image from 'next/image';

export default function MyApp() {
  return (
    <div className="container">
      <Image
        src="/image.jpg"
        alt="My image"
        layout="fill"
      />
    </div>
  );
}

const styles = {
  container: {
    width: '100%',
    height: '100vh',
  },
};

この例では、layoutプロパティをfillに設定することで、next/imageコンポーネントが親コンテナ (div.container) の高さと幅に完全に収まるようにしています。

objectFitプロパティを使用する

import React from 'react';
import Image from 'next/image';

export default function MyApp() {
  return (
    <div className="container">
      <Image
        src="/image.jpg"
        alt="My image"
        objectFit="cover"
      />
    </div>
  );
}

const styles = {
  container: {
    width: '100%',
    height: '100vh',
  },
};

この例では、objectFitプロパティをcoverに設定することで、画像がコンテナ内に収まるようにしながら、アスペクト比を維持しています。

widthとheightプロパティを使用する

import React from 'react';
import Image from 'next/image';

export default function MyApp() {
  return (
    <div className="container">
      <Image
        src="/image.jpg"
        alt="My image"
        width={100}
        height={100}
      />
    </div>
  );
}

const styles = {
  container: {
    width: '100%',
    height: '100vh',
  },
};

CSSを使用する

import React from 'react';
import Image from 'next/image';

export default function MyApp() {
  return (
    <div className="container">
      <Image
        src="/image.jpg"
        alt="My image"
      />
    </div>
  );
}

const styles = {
  container: {
    width: '100%',
    height: '100vh',
  },
  image: {
    height: '100%',
  },
};

その他の注意事項

上記のコード例は、あくまでも一例です。ご自身の要件に合わせて、適宜調整してください。
next/imageコンポーネントには、他にも多くのプロパティとオプションがあります。詳細は、Next.jsの公式ドキュメントを参照してください。

Next.jsにおけるnext/imageコンポーネントの高さを100%に設定する方法 - その他の方法

padding-bottomとbackground-imageを使用する

この方法は、擬似要素を使用して画像を表示するもので、古いブラウザではサポートされない可能性があることに注意が必要です。

import React from 'react';

export default function MyApp() {
  const styles = {
    container: {
      position: 'relative',
      width: '100%',
      height: 0,
      paddingBottom: '100%',
    },
    image: {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundSize: 'cover',
    },
  };

  return (
    <div className={styles.container}>
      <img src="/image.jpg" alt="My image" className={styles.image} />
    </div>
  );
}

iframeを使用する

この方法は、画像をiframe要素内に表示するもので、アクセシビリティの観点からは推奨されない方法です。

import React from 'react';

export default function MyApp() {
  const styles = {
    container: {
      width: '100%',
      height: '100vh',
      border: '0',
    },
  };

  return (
    <div className={styles.container}>
      <iframe src="/image.jpg" alt="My image" style={{ width: '100%', height: '100%' }} />
    </div>
  );
}