flexbox容器中的响应gatsby图像

Question

我正在努力让gatsby图像以响应的方式与flexbox一起工作：

我希望我所有的图像都有相同的大小和高度，它们应该对移动和桌面都有响应。

这是盖茨比图像的用例吗？

我能让它显示的唯一方法是添加一个固定的minWidth:

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

我尝试将graphQl查询更新为

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

没有minWidth，只有maxWidth。

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

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

Answer 1

我没有将Gatsby Image与Contentful一起使用，但通常对于Gatsby Images，我将每个图像组件封装在一个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"位与标准Gatsby文档一致；它可能与您使用Contentful的情况无关。