盖茨比图像流体设置为最大高度

Question

如何在 gatsby 中设置图片的高度？我的方法是：

My query:
           image {
              fluid {
                ...GatsbyContentfulFluid_withWebp
            }
            }

My return:
          <Img fluid={image.fluid} style={{ maxHeight: '200px' }} alt={title}></Img>

图像显示正常，但我查询了不止一张图像并且使用 style={{ maxHeight: '200px' }} 不适用于所有图像。有些图片有不同的高度，我想显示所有高度相同的图片。

这样做的正确方法是什么？

Answer 1

根据文档，您应该使用 imgStyle 属性直接将样式应用于底层 <img>

试试

<Img
 fluid={image.fluid}
 imgStyle={{ height: '200px', width: 'auto' }}
 alt={title}>
</Img>

style 应用于 <img> 的包装，您的图像可能会溢出它。

Answer 2

我认为您正在寻找固定图像，而不是流动图像：

My query:
           image {
              fixed {
                ...GatsbyContentfulFixed_withWebp
            }
            }

My return:
          <Img fixed={image.fixed} style={{ height: '200px', width: 'auto' }} alt={title}></Img>

此外，使用height，而不是maxHeight 属性强制所有图像的height到200px。

盖茨比图像流体设置为最大高度

Gatsby image fluid set to max-height

reactjs

gatsby

gatsby-image