如何用Next.js的Next/Image创建静态背景图？

要实现填充整个视口、窗口缩小时图片不缩放且保持居中的效果，需要调整Next.js Image组件的配置和父容器样式，结合TailwindCSS工具类实现：

修改Layout组件的背景图结构 #

替换原有背景图容器代码，调整为以下结构：

// @/components/Layout/index.js
import React from 'react'
import Head from 'next/head'
import Image from 'next/image';
import coverImg from '@/img/cover.jpg';

export default function Layout({ pageTitle, children }) {
    let titleConcat = "Jay Simons";
    if (pageTitle) titleConcat += " | " + pageTitle;

    return (
        <>
            <Head>
                <title>{titleConcat}</title>
            </Head>
            <main className="h-screen text-white relative">
                {/* 背景图容器 */}
                <div className="fixed inset-0 overflow-hidden z-[-1]">
                    <Image
                        src={coverImg}
                        alt="Cover Image"
                        fill
                        className="object-cover object-center"
                        priority // 优先加载背景图，提升首屏体验
                    />
                </div>
                {children}
            </main>
        </>
    )
}

关键配置说明 #

• fixed inset-0：让背景容器固定铺满整个视口，替代手动设置top/right/bottom/left。
• relative + fill：父容器设为relative，Image组件用fill属性自动填充父容器空间，无需手动设置width/height。
• object-cover object-center：object-cover保证图片按比例填充容器（超出部分裁剪），object-center强制图片始终居中显示，解决窗口缩放时偏移的问题。
• z-[-1]：将背景图置于内容下方，不遮挡页面元素。
• priority：标记背景图为优先加载资源，适配首屏背景图场景。

原有代码无效原因 #

你之前的写法给Image设置了固定width/height，并用flex容器包裹，限制了图片的自适应逻辑；同时object-cover需要配合fill或明确的容器尺寸才能生效，单独添加无法起作用。

内容的提问来源于stack exchange，提问作者Designly