I am using Nextjs to render the following snippet:
<Link href="/" passHref>
<a className={classes['leftHeaderLogo']}>
<Image src={brandLogo} alt="Vinyl Depository" placeholder="blur" objectFit="contain" />
</a>
</Link>
Where the class is:
.leftHeaderLogo {
height: 64px;
border: 1px solid red;
}
I expect the image being rendered to be limited within the red border. However this is the result I get:

What I am trying to do is, set via SCSS the height of the image (64px) and let the image itself to have 64px height as well, and let the width value being automated and inferred using objectFit="contain"
What Am I doing wrong?