[gatsby-plugin-image] How to crop images to get equal height while maintaining different ratios

[mkbctrl]

Hey, I struggle to find a solution to create an equaly tall pair of images, selected from two sets: square images and rectangular images.

Currently that's my GraphQl query to create the sets:

const {
    cultureSquareFiles: { nodes: squareImages },
    cultureRectFiles: { nodes: rectImages },
  } = useStaticQuery(graphql`
    query {
      cultureSquareFiles: allFile(
        sort: { fields: name, order: ASC }
        filter: { relativeDirectory: { eq: "src/directory/rect" } }
      ) {
        nodes {
          id
          publicURL
          name
          childImageSharp {
            gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, formats: AUTO, aspectRatio: 1.2)
          }
        }
      }
      cultureRectFiles: allFile(
        sort: { fields: name, order: ASC }
        filter: { relativeDirectory: { eq: "src/directory/square" } }
      ) {
        nodes {
          id
          publicURL
          name
          childImageSharp {
            gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, formats: AUTO, aspectRatio: 1.582)
          }
        }
      }
    }
  `)

as you can see below, by tinkering with aspectRatio I got almost the same height, but it feels like completely wrong approach.

My ultimate goal is to create a slider, where a single slide consist of two images:

[slide]
[square]
[rectangular]
[/slide]

and from obvious reasons, they should be equal. Obviously I can fake it, and cover the differences with overflow hidden or some other CSS techniques, but I would leave those as a last resort solutions.