cloudflare / cloudflare/vinext

next/image with fill crops images that should use object-fit: contain — inline cover overrides caller intent

Open
#3,238 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
8.8k
Forks
406
Avg merge
2d 6h
Merged PRs (30d)
120

Description

**Context**

`next/image` with the `fill` prop, where the image needs `object-fit: contain` (logos, diagrams, wide banners with text).

**Observed**

vinext renders fill images with an inline `object-fit: cover`, cropping the image from the top and bottom. Passing `objectFit` through the `style` prop does override it, but nothing else does — no stylesheet rule can win against the inline style, so the documented "style your own object-fit" approach only works if you know about the hardcoded value.

**Expected — Next.js parity**

Next.js builds its fill `imgStyle` from the legacy `objectFit` prop (usually `undefined` for modern usage) and assigns the caller's `style` last, so there is **no inline object-fit at all** unless the caller sets one (`next/dist/shared/lib/get-img-props.js`):

```js
const imgStyle = Object.assign(fill ? {
position: 'absolute', height: '100%', width: '100%',
left: 0, top: 0, right: 0, bottom: 0,
objectFit, objectPosition
} : {}, ..., style);
```

vinext should leave the value to the caller the same way.

Fixed by #3237.

Contributor guide

Open the contributing guide

Research direction

Start with the next/image fill implementation and compare its style construction with the referenced next/dist/shared/lib/get-img-props.js behavior. Check #3237 first, since the issue says it already fixed this behavior; done means fill images no longer receive a forced inline object-fit and caller styling remains effective.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, typescript
Domain
frontend
Issue type
Bug
Difficulty
1/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.