Gatsby 盖茨比图像流体延伸到容器的垂直尺寸之外

我正在建一个盖茨比网站来展示我的照片。我希望每张照片都有一个全屏页面，照片应该填满页面，但要考虑纵横比

问题是，虽然横向拍摄的照片被正确限制，但纵向拍摄的照片填满了所有水平空间，但溢出了垂直空间

这是一份声明

如前所述，使用流体类型的图像会拉伸以匹配容器的宽度和高度

然而，我观察到的行为是，它只拉伸以匹配宽度，而不是高度

我将问题简化为一个小示例，该示例尝试将图像包含在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
        }
      }
    }
  }
`;

从“React”导入React
从“盖茨比”导入{graphql}
从“./组件/布局”导入布局
从“盖茨比图像”导入Img
导出默认值（道具）=>{
const{data}=props；
返回(
)
}
export const query=graphql`
查询（$id:String！）{
文件（id:{eq:$id}）{
childImageSharp{
流体（最大宽度：500，最大高度：500，配合：内部）{
…盖茨比磁流体
}
}
}
}
`;

在横向示例中，图像被约束到包含div的宽度：

在纵向示例中，图像填充了包含div的整个宽度，变得太高：

如何使盖茨比图像缩小到可用的垂直空间

---

p、 示例图像中的圆角是旧解决方案中引导类的残余，但它的存在并没有影响问题。

如果我将

高度

和

对象匹配

CSS属性添加到

标记中，它就会按照我的意愿工作。（在Firefox和Chrome中）

---

在我的简化示例中，以及在实际的基于flex box的布局中，这都给出了预期的结果。

您希望图像为400px x 400px吗？不，这只是为了举例说明图像在纵向方向时延伸到容器外部，但在横向方向时保持在容器内部。然而，我似乎已经明白了

<Img
  style={{ height: "100%", width: "100%" }}
  imgStyle={{ objectFit: "contain" }}
  fluid={ data.file.childImageSharp.fluid }
/>