[Next.js]next/imageの画像が引き伸ばされる時|2001Y.me

非常に簡単に画像の最適化が行えるnext/image。

今までは、Gulpで様々なサイズのWebPとJpegを生成して、Hugoで無理やり表示させていました。でも、なかなかにスマートじゃない。

なので、このImageコンポーネントが使いたくてNext.jsを始めたと言っても過言ではありません。

objectFit=“cover” を追加する

リサイズまでしたいので、layout="fill"ではなく、width,heightを指定。ただこれだと、画像が引き伸ばされてしまうので、objectFit="cover"を追加します。

<Image src="img.jpg" alt="説明" height="300" width="500" objectFit="cover" />

CSSのobject-fitと同じ値を指定することができます。

lightbox