Next/Image is not limited within a box

Viewed 21

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?

0 Answers
Related