gatsby - ギャツビーの画像流体は、コンテナーの垂直サイズを超えて伸びます

Question

写真を表示するギャツビー サイトを構築しています。写真ごとに全画面表示のページが必要で、写真がページいっぱいに表示される必要がありますが、縦横比は尊重されます。

問題は、横向きで撮影された写真は正しく制限されますが、縦向きで撮影された写真は水平方向のスペースをすべて埋めますが、垂直方向のスペースをオーバーフローします。

ドキュメントには、ステートメントがあります

前述のように、fluid タイプを使用する画像は、コンテナーの幅と高さに合わせて引き伸ばされます。

ただし、私が観察した動作は、高さではなく幅に合わせて伸びるだけです。

問題を単純化して、400x400px コンテナーに画像を格納しようとする小さな例を示します。

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import Img from "gatsby-image"

export default (props) => {
  const { data } = props;
  return (
    <Layout>
      <div style={{height: "400px", width: "400px", background: "white" }}>
        <Img fluid={ data.file.childImageSharp.fluid } />
      </div>
    </Layout>
  )
}

export const query = graphql`
  query($id: String!) {
    file(id: { eq: $id }) {
      childImageSharp {
        fluid(maxWidth: 500, maxHeight: 500, fit: INSIDE) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`;

横長の例では、画像は含まれる div の幅に制限されます。

縦向きの例では、画像が含まれている div の幅全体を埋めてしまい、高すぎます。

Gatsby Image を縮小して、使用可能な垂直スペースに制限するにはどうすればよいですか?

ps サンプル画像の丸みを帯びた角は、古いソリューションのブートストラップ クラスの残骸ですが、その存在は問題には影響しませんでした。