如何在不牺牲纵横比的情况下使容器中的 Gatsby 图像尽可能大？

【问题标题】：How do I make a Gatsby image as large as possible in a container without sacrificing aspect ratio?如何在不牺牲纵横比的情况下使容器中的 Gatsby 图像尽可能大？
【发布时间】：2021-07-18 07:58:50
【问题描述】：

基本上，我想复制 object-fit: contain 的行为，但使用 gatsby-plugin-image 来获得图像处理和源选择的好处。

【问题讨论】：

标签： gatsby gatsby-image

【解决方案1】：

StaticImage 和 GatsbyImage 都有一堆 shared props。在您的情况下，objectFit 是您正在寻找的。默认情况下，它采用cover 作为值，但您可以将其更改为contain。例如：

<StaticImage src="some/url.extension" objectFit="contain" />

【讨论】：

这太棒了，谢谢！如此简单的答案。
另外，感谢您没有因为没有发布代码而责骂我 - 我认为不需要（没有进行 SO 自动检查）并且被证明是正确的:)
刚做完，你回答得这么快，我等了 5 分钟:)