Gatsby内容流体图像拉伸超过100%
Gatsby内容流体图像拉伸超过100%
提问于 2020-09-13 20:26:14
我正在尝试用图像数组填充div，使用
fluid{
...GatsbyContentfulFluid
}除了gatsby拉伸小于div宽度的图像来填充整个空间之外，一切都很好(他应该这样做)，但我的问题是，我是否可以防止这种情况，对于那些图像，使用100%的宽度而不拉伸它们，并且只将流体应用于较大的图像。
gatsby-image plugin says that I can use GatsbyImageSharpFluidLimitPresentationSize fragment
但这在满足的情况下不起作用。
有没有简单的解决办法？谢谢
回答 1
Stack Overflow用户
发布于 2020-09-13 23:56:21
根据您的需求，您有几个可以绕过它的试验：
- 正如您所说，Contentful不允许
GatsbyImageSharpFluidLimitPresentationSize片段，但是，您可以使用downloadLocal: trueplugin option下载资产，并应用包含GatsbyImageSharpFluidLimitPresentationSize片段的staticQuery。我会看起来像这样：
const data = useStaticQuery(graphqlquery { file(relativePath: { eq: "path/to/image/default.jpg" }) { childImageSharp { fluid { ...GatsbyImageSharpFluidLimitPresentationSize } } } }) return }
- 另一种可能需要更多处理(媒体和CSS工作)的选择是使用allowed by Contentful.
格式的固定大小片段之一
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63870764
复制相关文章
相似问题
腾讯云开发者
