gatsby-plugin-image: resize images taking aspect ratio into account

[smashercosmo]

Currently, if you provide both width and height to gatsbyImageData function you get square image in response for both portrait and landscape oriented images:

image {
  childImageSharp {
    gatsbyImageData(width: 450, height: 450)
  }
}

What I suggest is the ability to resize images according to this formula:

const ratio = Math.min(width / imageWidth, height / imageHeight)
const resizedWidth =  imageWidth * ratio
const resizedHeight = imageHeight * ratio

Using this formula resized images will keep their orientation and aspect ratio. WDYT?

[smashercosmo]

@wardpeet wdyt?

[smashercosmo]

Anyone? I think it's pretty important feature to have

[ascorbic]

@smashercosmo You probably want transformOptions: {fit: CONTAIN}. Take a look at the sharp docs for the various options there.

[smashercosmo]

@ascorbic hey, thx for the tip. I tried all of the options. Unfortunately none of the options worked for me.
COVER, CONTAIN and FILL options behave the same way, when both width and height are provided (squared images are returned).

width INSIDE option, image is resized liked this:

{ "height": 3216,"width": 4284 }
              |
              V
{"height": 338, "width": 450 }

which looks correct, but another image (where height is bigger) is resized incorrectly

{ "height": 4032,"width": 3024 }
              |
              V
{"height": 599.112426035503, "width": 450 }

OUTSIDE option doesn't work the way I need either

[smashercosmo]

There is also a chance that it's a bug in Sharp

[smashercosmo]

@ascorbic WDYT?

[smashercosmo]

Still relevant for Gatsby 3.3

[smashercosmo]

Still not possible to resize an image so that it's smaller than or equal to specified dimensions while maintaining aspect ratio :(

[smashercosmo]

ping @ascorbic

[ascorbic]

I don't work at Gatsby anymore I'm afraid and don't really have time to look at this.

[smashercosmo]

alright, thx, I'll try to ping someone else

[smashercosmo]

@LekoArts @wardpeet may be some of you cam comment on this?