gatsby图像溢出容器

Question

我对gatsby图像有一些困难，希望有人能对此有所了解。我正在尝试在设置为70vh的容器中显示“流体”图像。我以为图像流畅，可以自动调整大小以填充其容器，但是发生的是图像从容器中溢出并显示在下面的元素后面。我是否误解了流动图像的工作原理？

css

.front-image
  height: 70vh !important

js

<div className="front-image">
           <Img fluid={data.frontImage.edges[0].node.childImageSharp.fluid}/>
 </div>

查询

frontImage: allFile(filter: {relativePath: {eq: "header.png"}}) {
    edges {
        node {
            childImageSharp {
                fluid(maxWidth: 1000) {
                    ...GatsbyImageSharpFluid
                }
            }
        }
    }
}

谢谢！