I'm trying to get my image to cover the screen but have one issue. When my width gets too big it starts to scale the height so it overflows the viewport which I don't want. How can I fix this?

import Image from "next/image";
import Vipertrace from "@public/projects/game/vipertrace.png";

export default function Home() {
  return (
    <div className="relative h-screen flex justify-center items-center overflow-hidden">
      <Image
        alt="Vipertrace"
        src={Vipertrace}
        quality={100}
        fill
        priority
        style={{ objectFit: "cover" }}
      />
      <a
        className="font-bold text-5xl text-center underline z-10"
        href="https://mywebsite.com/"
      >
        EXEQ
      </a>
    </div>
  );
}