I am using next/Image along with tailwind to render an image which acts as a banner. It spans the entire width of its parent, which is the entire page width.

The issue I am having is that the image looks squished and not properly proportioned on mobile, which I am looking to fix. I have tried solutions from two other solutions on this site (here and here), but nothing ever worked for me.

I suspect it may be the height that is set on the parent div, which I am open to changing if that would aid in fixing my issue.

      <div className="relative w-full h-[476px]">
  <Image src="/banner.jpg" alt="Banner" fill />
</div>