Image placeholder does not respect objectFit property

[matteosailogy]

What version of Next.js are you using?

11.1.0

What version of Node.js are you using?

14.17.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

When I use the Image component to render an image with layout=fill and objectFit=contain property, it does it well when the image has been loaded (image is adapting into parent container), but when I set placeholder=blur I see blurred image filling the whole container instead of being contained (image ratio is same as original)

Expected Behavior

I'm expecting to see objectFit and objectPosition props to blurDataURL image as well

To Reproduce

Here is the code sample:
<Image src="https://assets.imgix.net/setup/serving-swimmer.jpg?w=7000" alt="Image test" layout="fill" objectFit="contain" objectPosition="center" placeholder="blur" blurDataURL="https://assets.imgix.net/setup/serving-swimmer.jpg?w=10" />
You can find a sandbox running sample here. If your connection is too good, please increase the w=7000 value in src to increase the image size
https://codesandbox.io/s/image-placeholder-object-fit-contain-70h5q?file=/pages/index.js

[vulture990]

I had that issue too once

[styfle]

Seems like other styles are not applied either such as border-radius #18858 (comment)

[styfle]

This should be fixed once we land #34339 and the style prop can be used instead of the objectFit prop.

[kirkas]

Also experiencing that issue.

Even if "raw" eventually solves a particular use case, it still means that blur area will fit the entire parent width/height when using layout="fill" & objectFit="contain"

[grazianodev]

Experiencing this too and found that applying an aspect ratio to the image's parent helps, something like:

<div className={ styles.ImageContainer } style={{ aspectRatio: `${image.width}/${image.height}` }}>
    <Image 
        src={ image.src } 
        layout="fill" 
        objectFit="contain" 
        placeholder="blur" 
        blurDataURL={ image.placeholder }
    />
</div>

[joshuabaker]

Looks to have been resolved in #26590

[balazsorban44]

Closing because of the suggestion above. If you still think it's an issue, please open a new one with a fresh reproduction (using next@canary). Thanks!

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.