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

问题描述

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

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

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

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

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

解决方法

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

尝试类似的东西

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

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

,

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

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

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

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