Gatsby flexbox容器中的响应式盖茨比图像

我正在努力让盖茨比形象公司以一种快速响应的方式与flexbox合作：

我希望我所有的图片大小和高度都相同，并且它们应该对手机和桌面有响应

这是盖茨比图像的用例吗

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

minWidth

：

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

没有minWidth，只有maxWidth

很明显，我完全不知道如何使用这个

---

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

我没有将gatsby图像与内容一起使用，但通常对于gatsby图像，我将每个图像组件包装在一个div中，并以这种方式控制大小

import Img from "gatsby-image"

...

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

---

我的GraphQL查询中的'childImageSharp'位正好符合标准的Gatsby文档；它可能与使用Contentful的案例无关。

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

import Img from "gatsby-image"

...

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

---

我的GraphQL查询中的'childImageSharp'位正好符合标准的Gatsby文档；使用Contentful可能与您的案例不相关。

谢谢，如果我必须将其包装在一个div中，并给出自己的维度，则感觉它违背了目的。我想我可以编写一个graphql查询。@dagda1您不必这样做；这只是一种蛮力的方式。我看到一些与盖茨比图像不一致的行为，这就是我为什么这么做的原因。如果不在容器上设置一个宽度，图像就不会显示。谢谢你，如果我不得不将其包装在一个div中，并给它我自己的尺寸，那感觉就像是在破坏目的。我想我可以编写一个graphql查询。@dagda1您不必这样做；这只是一种蛮力的方式。我看到一些与盖茨比图像不一致的行为，这就是我这样做的原因。如果不在容器上设置宽度，图像就不会显示。不确定这是否有助于解决具体问题，但您可以使用盖茨比图像生成的图像和容器各自的样式道具来设置它们的样式。不确定它是否有助于您的具体问题，但您可以使用各自的样式道具设置图像和盖茨比图像生成的容器的样式。

.img-wrap {
    width: 15vw;
}