Flexbox容器中的响应式Gatsby图像

Question

我正在努力使gatsby-image以响应方式与flexbox配合使用：

我希望我所有的图像都具有相同的大小和高度，并且它们应该对移动设备和台式机都具有响应性。

这是gatsby图片的用例吗？

我要显示的唯一方法是添加固定的minWidth：

<div className={styles.header}>
  <GatsbyImage className={styles.image} fluid={image.fluid} style={{ minWidth: '100px' }} />

我尝试将graphQl查询更新为

          fluid(maxWidth: 100) {
            ...GatsbyContentfulFluid
          }
    

没有minWidth，只有maxWidth。

我显然完全不知道如何使用它。

如何在flexbox容器中使用gatsby-image，我希望所有图像的大小和高度都相同。

Answer 1

我没有将Gatsby Image与Contentful一起使用，但是通常对于Gatsby Image，我将每个图像组件包装在div中，并以此方式控制大小。

import Img from "gatsby-image"

...

<div className="img-wrap">
    <Img fluid={image.childImageSharp.fluid} style={{width: "100%"}} />
</div>

// CSS

.img-wrap {
    width: 15vw;
}

我的GraphQL查询中的'childImageSharp'位与标准盖茨比文档一致；它可能与您使用Contentful的情况无关。