'Next/Image is not limited within a box

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: enter image description here

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?

cssnext.js


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions