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

【问题标题】：responsive gatsby image in flexbox containerflexbox容器中的响应式盖茨比图像
【发布时间】：2020-12-11 15:11:52
【问题描述】：

我正在努力让 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，并且我希望所有图像的大小和高度相同。

【问题讨论】：

不确定它是否对您的确切问题有帮助，但您可以使用各自的样式道具设置图像和 gatsby-image 生成的容器的样式。 stackoverflow.com/questions/57542305/…

【解决方案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 的情况无关。

【讨论】：