Gatsby-image-plugin layout constrained not working with dynamic images

Question

I am trying to get an array of images of varying aspect ratios to fit nicely inside a modal - that is the modal will have a larger height for vertical images and smaller height for horizontals. I therefore do not want to specify a height in the graphql query because the images should scale down to fit their container.

  const data = useStaticQuery(graphql`{
allFile(filter: {sourceInstanceName: {eq: "images"}, ext: {eq: ".jpg"}}) {
  nodes {
    id
    name
    relativeDirectory
    childImageSharp {
      original {
        height
        width
      }
      gatsbyImageData(quality: 100, layout: CONSTRAINED)
    }
  }
}

} `);

I have passed the photos into a modal, a carousel, and a dummy div with height of 300pixels and the result is always the same: the images are huge and cropped to fit the container. When I set max height in the query to 500 pixels, everything works fine, but the verticals are much too tiny for the modal. When I set height on GatsbyImage directly, the images are the right size, but something is adding (Gatsby Image wrapper?) 1000 or so pixels of padding on the left and right sides of the image.

Carousel styles:

  <div
    ref={scrollContainer}
    tabIndex={0}
    css={`
    max-width: 100vw;
    max-height: 60vh;
    overflow-x: auto; etc...

GatsbyImage styles:

  <GatsbyImage
    alt=""
    objectFit='contain'
    // above doesn't work
    image={getImage(photo)}
    key={photo.id}
    // style={{ height: '60vh' }}
    //above works but adds excessive padding somewhere 
    imgStyle={{ objectFit: 'contain' }}
  //above doesn't work
  />