Contentful provider renders fit property incorrect

[rutgerbakker95]

Hi,

When I'm using Contentful provider and change the fit prop. It renders the property incorrect:

"@nuxt/image": "^0.6.0",

Example

This component..

<nuxt-img
  fit="contain"
  width="500"
  height="500"
  src="https://images.ctfassets... .jpg"
/>

renders: <img src="...?w=500&amp;h=500&amp;fit=fill" width="500" height="500">

When I try to use fit='fill' it renders scale

[DanielRivers]

I am also seeing this on the nuxt3 version of the plugin.

[Ic3m4n34]

Same here. Any solution for this?

[tobyj]

See code. It looks like fill incorrectly gets mapped to scale.

If you want it to be fill instead use fit="contain", as contain is mapped to fill.

Contentful docs for fit:

• fill: Resize the image to the specified dimensions, cropping the image if needed.
• scale: Resize the image to the specified dimensions, changing the original aspect ratio if needed.

[danielroe]

The issue here is that the Nuxt Image definitions for 'contain' and 'fill' are somewhat different.

The fit property specifies the size of the images. There are five standard values you can use with this property.

• cover: (default) Preserving aspect ratio, ensure the image covers both provided dimensions by cropping/clipping to fit
• contain: Preserving aspect ratio, contain within both provided dimensions using "letterboxing" where necessary.
• fill: Ignore the aspect ratio of the input and stretch to both provided dimensions.
• inside: Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified.
• outside: Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified.

https://image.nuxtjs.org/components/nuxt-img/#fit

Effectively Contentful's 'fill' is the same as Nuxt Image's 'cover', as far as I can tell.