Responsive images generated with contain fit and an aspect ratio that causes pillarboxing are missing high resolution images

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Images that get transformed with imagesharp using fit: contain and an aspectRatio that causes pillarboxing should add the pillarboxes before resizing the image for each breakpoint. Otherwise, we end up losing higher resolution images due to the order of operations.

Steps to Reproduce

1. Generate responsive images via a GraphQL query (or StaticImage works too) with the following settings:

   childImageSharp {
     gatsbyImageData(
       layout: FULL_WIDTH
       aspectRatio: 2
       transformOptions: { fit: CONTAIN }
     )
   }
   

Expected Result

As an example, for a portrait image with a resolution of 800x1000, and image breakpoints of [600, 900, 1200], the resulting responsive images should be:

• 600x300
• 900x450
• 1200x600

We can get these resolutions if instead of sizing down first to conform to the breakpoint and aspect ratio, the pillarboxes were added to to the sides of the image first, and then the image resized (e.g. the 800x1000 image gets cropped to be 2000x1000, and then resized to each breakpoint after that).

Actual Result

Instead, the resulting responsive images are:

• 600x300
• 800x400

Environment

System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.8.0 - ~/.nvm/versions/node/v16.8.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.8.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.8.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Firefox: 93.0
    Safari: 15.0
  npmGlobalPackages:
    gatsby-cli: 3.14.2