バージョン 10 以降、Next.js には、画像の最適化とレスポンシブな画像のサイズ変更の機能を提供する組み込みImageコンポーネントが付属しています。私はこれがとても気に入っており、固定サイズの画像に Web サイト全体で使用しています。公式ドキュメントによると、 の場合を除き、幅と高さは必須のプロパティですlayout=fill。
さて、幅と高さが事前にわからない場合でもコンポーネントを使用したいと思いますImage。画像の正確なサイズが不明な CMS から取得したブログ リソースがあります。この場合、コンポーネントを使用する方法はありますかImage?
ご協力いただければ幸いです。
ベストアンサー1
layout=fillはい、おっしゃったオプションで使用できます。
この場合、画像の「アスペクト比」を設定する必要があります
<div style={{ position: "relative", width: "100%", paddingBottom: "20%" }} >
<Image
alt="Image Alt"
src="/image.jpg"
layout="fill"
objectFit="contain" // Scale your image down to fit into the container
/>
</div>
使用するobjectFit="cover"と、コンテナ全体を埋めるように画像を拡大できます。
このアプローチの欠点は、指定したサイズに適用されることです。サイズはwidth「100%」などの相対値、または「10rem」などの絶対値にすることができますが、画像のサイズに基づいて幅と高さを自動的に設定する方法はありません (少なくとも現時点では)。