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
          }

没有最小宽度只有最大宽度。

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

如何在 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' 位正好符合标准的 Gatsby 文档；它可能与您使用 Contentful 的情况无关。

responsive gatsby image in flexbox container