全imageをImageに統一したい

[herohoro]

目標

• サムネは余白のない(フィットした)表示にしたい。
• 記事内imageブロックの余白を違和感ない表示にしたい。

現状

【サムネ】

• サムネはサイズを統一して収納している
• サムネは表示させる場所によってクラス名でサイズ変更している
• 画面サイズによっても変更している

【記事内imageブロック】

• 高さをいろいろ設定して余白が生まれすぎない値を探ったが縦長or横長のimageどちらかを優先するしかない

[herohoro]

imageブロックも現段階では課題かもしれない。。。。
👇

[herohoro]

<div style={{width: '100%', height: '100%', position: 'relative'}}>
  <Image
    alt='Mountains'
    src='/mountains.jpg'
    layout='fill'
    objectFit='contain'
  />
</div>

How to set the next/image component to 100% height_stackoverflow

[herohoro]

やってみたけど画像は表示されない。。。
から

.image > div:first-child {
  position: relative;
  width: auto;
  height: 600px;
  border: 3px groove #dddddd;
  border-radius: 10px;
}

にしてwidthをautoにしてみた。
heightは縦長画像とのバランスをみて600pxに。

▼　これはもう我慢するしかないのか・・・？

[herohoro]

調べて分かったこと

画面サイズによっても変更している

👉Imageは自動でレスポンシブしてくれる。

[herohoro]

ブックマーク

• https://zenn.dev/unreact/articles/nextjs-basic-features-image-optimization-jp
• https://qiita.com/dtakkiy/items/d153cf44de7a6dae9a8f

[herohoro]

otoyo#50 で対応していただけた＼(^o^)／＼(^o^)／

[herohoro]

次やること

• サムネ箇所をimage/nextへ変更する

[herohoro]

できた＼(^o^)／