Next.jsでfillでimageのstyleをする
画像のサイズが統一でない時に有用
next/imageがlegacyかどうかでじゃっかん異なるが雰囲気で読み解けるはず
考え方としては
まずdivなどで空間を作り、そこに画像を埋め込む
必ず余分に一つdivなどの親が必要になるmrsekut.icon
<Image/>部分をコメントアウトした状態でも、divの空間が保たれているということ
例
code:ts
<div className="relative h-28 bg-yellow-200">
<Image className="object-cover" src={picUrl} alt={name} fill />
</div>
divで空間を作る
上記コード例のbg-yellow-200は空間のわかりやすさのために書いているmrsekut.icon
親はrelativeを指定する必要がある
height/widthのpropsは不要
legacy時代での書き方
上記のものと考え方としては同じ
ただし、objectFitなどがpropsで提供されているのでそれを使う
例
code:tsx
<div style={{width: '80vw', height: '60vh', position: 'relative'}}>
<Image
alt='Mountains'
src='/mountains.jpg'
layout='fill'
objectFit='contain'
/>
</div>
親で空間を作る
親はrelativeを指定する必要がある
Imageはlayout=fillとobjectFit=containを指定する
height/widthのpropsは不要