Gatsby.js - 如何设置包含相同高度的 GatsbyImages 的响应式库的样式并保持纵横比

问：

https://codepen.io/vizman/pen/dyQzJKY?editors=1100 - 在这里我写了我想要实现的例子。我有不同的纵横比图像，如顶行示例，我想创建响应式图库，例如“我想要的图库”行。所有图像都应具有固定高度，fe。桌面上为 300 像素，移动设备上为 200 像素，以此类推，宽度应保持纵横比。使用 img 标签很容易在 css 中实现。 但我不知道如何使用 GatsbyImage 在gatsby.js中做同样的事情。

我试过了：

gallery {
  childImageSharp {
    gatsbyImageData(layout: CONSTRAINED, placeholder: "blurred")
  }
}

并用不同的风格和道具失败了。有人可以帮忙吗？FULL_WIDTH