我有一个页面，当用户向下滚动时，标题栏会改变大小（从120 px变为70 px）。我添加了这个过渡作为Tailwind类之间的交换，并添加了一个高度过渡，效果很好。我现在试图让网站的标志，这是在头部，以调整大小与它。我尝试使用NextJS 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 imgClasses = classNames("transition-[height]");
    const stdClasses = `${baseClasses} h-[70px]`,
        fullClasses = `${baseClasses} h-[120px]`,
        stdImageHeight = 53,
        fullImageHeight = 100;

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

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

    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">
                <div className={`h-[${imgHeight}px] relative`}>
                    <Image
                        className={imgClasses}
                        src={gp_logo}
                        alt="Gamers' Plane Logo"
                        fill={true}
                    />
                </div>
            </div>
        </header>
    );
}

我尝试将imgHeight设置为样式并作为Tailwind类（h-[${imgHeight}px]）。我还尝试为Image fill={true}指定一个div父对象，但由于div父对象占据了页面的全部宽度，所以它被压扁了。我还在div上尝试了width: fit-content，但因为图像是内容，所以它保持完整大小。
我想有图像计算其各自的高度/宽度的基础上可用的空间。我可以用Image组件来做这件事吗？还是应该回到img标签？