Next.jsのnext/imageを使って親要素のサイズに画像を合わせる

next/imageを使って画像を表示するときに、親要素のサイズを満たすように画像を表示したい場合です。

例えば、親要素が300*300で、画像が300*350だったとします。

縦横の比率は同じままで、親要素を隙間なく画像を表示したい場合は以下のようにします。

<div style={{position: 'relative', width: '300px', height: '300px'}}>
  <Image src={img１}  layout='fill' objectFit='cover' />
</div>

layout=’fill’で親要素のwidthとheightに合わせて画像のwidthとheightが決まります。

そして、objectFit=’cover’ により、縦横比を変えることなく、サイズに収まるように表示されます。

今回の例の場合は、画像の方が高さが50px大きいため、この部分が切り取られた状態で表示されます。

ここで要注意なのは、親要素に position: 'relative’ を設定する必要があることです。

さもないと、画像が画面一杯に引き伸ばされて表示されます。

このことはドキュメントにも記載されています。

https://nextjs.org/docs/basic-features/image-optimization#styling

When using fill, the parent element must have position: relative

This is necessary for the proper rendering of the image element in that layout mode.

React

Posted by たみぼうず