cloudflare / cloudflare/vinext
next/image with fill crops images that should use object-fit: contain — inline cover overrides caller intent
- 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
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