🏞️

next/imageで、固定値ではなくレイアウトの幅に合わせたい時の書き方

2025/04/08に公開3件

CSS

ほぼ備忘録です。
<img>で書くと、linterに怒られるので何とかできないかということで調べたら見つけました。

<Image
  src={imageUrl}
  alt="画像"
  width={0}
  height={0}
  sizes="100%"
  style={{ width: "100%", height: "auto" }}
/>

こう書けば、横幅に合わせた画像表示になります。

Discussion

Honey32

fill Prop を使えば、width と height に 0 を渡さずにできると思います！

Manabu Kurita

ご意見ありがとうございます！👍
自分のローカルで試してみたのですが、こんなエラーが発生しちゃうみたいです。

Error: Image with src "/images/lp/lp_1.png" has both "fill" and "style.height" properties. Images with "fill" always use height 100% - it cannot be modified.

どうやら、fillを使ってしまうと、stylesの方のheightもエラーになってしまうので、
意図したスタイリングにできなさそうでした。😅
stylesのheightを消してしまうと、fillが優先されて、要素をはみ出して画像配置してしちゃうんですよね笑

Honey32

よく見返すと、横幅は親に従って、縦の長さは画像そのもののアスペクト比を維持するよう自動で設定するってケースだったんですね💦
Next.js のドキュメントの中ではこのようなケースについてキチンと説明されていなくて難しいですよね…
たぶん   style={{ width: "100%", height: "auto" }} で大丈夫だと思います
失礼しました 🙇