无法实现NextJS Image组件随Header高度平滑过渡的问题

不用改用原生img标签，通过调整Next.js Image组件的配置和容器布局就能实现同步缩放效果，具体修改如下：

核心问题分析 #

你之前的实现单独维护了图片容器的高度状态，和Header的实际可用高度（Header带py-2内边距，实际内容高度是Header高度减去上下内边距）不匹配，且未给图片设置合适的缩放规则，导致无法同步过渡。

修改步骤 #

1. 移除冗余的图片高度状态：无需单独维护imgHeight，让图片容器直接继承Header的可用高度。
2. 调整图片容器布局：将图片容器设为h-full relative，确保它占满Header的内容高度。
3. 配置Image组件的缩放规则：用fill={true}配合object-contain（或object-cover，按需选择），同时给Image添加过渡类，实现平滑缩放。

修改后的完整代码 #

export default function Header() {
    const baseClasses = classNames(
        "transition-[height] border-b border-b-black fixed top-0 left-0 w-full z-[100] bg-header-gray flex justify-center shadow-[0_1px_20px_1px_#777] px-4 py-2"
    );
    const stdClasses = `${baseClasses} h-[70px]`,
        fullClasses = `${baseClasses} h-[120px]`;

    const pathname = usePathname();
    const [classes, setClasses] = useState<string>(
        pathname !== "/" ? stdClasses : fullClasses
    );

    const updateClasses = () => {
        if (window.scrollY <= 50) {
            setClasses(fullClasses);
        } else {
            setClasses(stdClasses);
        }
    };

    useEffect(() => {
        if (pathname === "/") {
            updateClasses();
            document.addEventListener("scroll", updateClasses);
        } else {
            setClasses(stdClasses);
            document.removeEventListener("scroll", updateClasses);
        }
    }, [pathname]);

    return (
        <header id="site_header" className={classes}>
            <div className="w-full max-w-screen-xl flex items-center h-full">
                <div className="h-full relative">
                    <Image
                        className="transition-all duration-300 object-contain"
                        src={gp_logo}
                        alt="Gamers' Plane Logo"
                        fill={true}
                        sizes="(max-width: 1280px) 100vw, 1280px"
                    />
                </div>
            </div>
        </header>
    );
}

关键说明 #

• 给Header内部容器添加flex items-center h-full，确保内容垂直居中且占满Header高度。
• object-contain会保持图片比例并在容器内完整显示；若需要铺满容器，可替换为object-cover。
• transition-all duration-300让图片缩放动画和Header高度过渡保持同步节奏。
• sizes是Next.js Image的必要配置，确保图片能按不同视口加载适配尺寸。

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