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

【问题标题】：Gatsby image fluid set to max-height盖茨比图像流体设置为最大高度
【发布时间】：2021-07-06 13:41:13
【问题描述】：

如何在 gatsby 中设置图像的高度？我的做法是这样的：

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

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

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

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

【问题讨论】：

你使用了height: '200px', width: 'auto'（不是maxHeight）吗？也许您正在寻找一个固定的图像，而不是流动的......
我认为你是对的，应该尝试修复。

标签： reactjs gatsby gatsby-image

【解决方案1】：

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

试试类似的东西

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

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

【讨论】：

仍然没有相同的高度，尝试其他的..

【解决方案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。

【讨论】：