Gatsby-image：为不同的分辨率提供正确的图像尺寸

Question

我正在努力使用 Gatsby-image 来为不同的分辨率提供正确的图像尺寸。我有一个尺寸为 1920x367（宽 x 高）的图像，当窗口尺寸较小（例如移动设备）时，问题是可见的，因为 gatsy-image 使用 490x92 的图像来覆盖 437x354 的容器。

Here 窗口大时可以看到图像。 Here 当窗口大小较小时。

GraphQL 查询：

configHowWeWork: file(relativePath: { eq: "howwework/howwework-header.jpg" }) {
    childImageSharp {
        fluid(maxWidth: 1920, maxHeight: 367) {
            ...GatsbyImageSharpFluid_withWebp
        }
    }
}

盖茨比图片：

<div className="intro intro-page intro-container">
    {configHowWeWork.childImageSharp.fluid && (
        <Img
            className="intro-background"
            fluid={configHowWeWork.childImageSharp.fluid}
            alt="alt"
        />
    )}
</div>

相关 CSS：

.intro-container {
    position: relative;
}

.intro-background {
    position: absolute!important;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    z-index: 0;
    overflow: hidden;
}

问题：如何避免请求尺寸为 490x92（相同的初始纵横比）的图像，而是提供可以填充 437x354 的图像（我想要的是裁剪或剪辑，但不缩放in) 没有拉伸高度。

我已经尝试过的：

1. 我尝试在 gatsby 查询中使用 FILL 来克服纵横比限制，但没有成功。
2. 使用presentationSize。

谢谢你的回答。

编辑：找到的唯一一种解决方案是创建尺寸为max(width, height) 的方形图像，但在我的情况下始终是宽度。通过这种方式，我可以通过低分辨率和高分辨率（例如移动和桌面）获得良好的质量，但我浪费了太多资源：

• 生成的桌面分辨率图像为 1920x1920，但容器尺寸为 1920x367。
• 移动端的分辨率并没有那么不平衡，但仍然需要更大的高度。

我确信我遗漏了一些东西，因为仅仅创建一个响应式的宽英雄图像并不难。

编辑 2：如果我在 Firefox 中使用响应式设计模式切换到移动分辨率，我无法理解为什么图像质量很好，但如果我使用与以前的移动设备相当的分辨率，质量就不好，但是没有响应式设计模式。

Answer 1

我克服了 3 张图片和艺术指导的问题，我无法做得比这更好。

首先，查询图片：

headerLarge: file(relativePath: { eq: "image-L.jpg" }) {
    childImageSharp {
        fluid(maxWidth: 1920, webpQuality: 100) {
            ...GatsbyImageSharpFluid_withWebp
            ...GatsbyImageSharpFluidLimitPresentationSize
        }
    }
}
headerMedium: file(relativePath: { eq: "image-M.jpg" }) {
    childImageSharp {
        fluid(maxWidth: 900, webpQuality: 100) {
            ...GatsbyImageSharpFluid_withWebp
            ...GatsbyImageSharpFluidLimitPresentationSize
        }
    }
}
headerSmall: file(relativePath: { eq: "image-S.jpg" }) {
    childImageSharp {
        fluid(maxWidth: 500, webpQuality: 100) {
            ...GatsbyImageSharpFluid_withWebp
            ...GatsbyImageSharpFluidLimitPresentationSize
        }
    }
}

创建源数组：

const sourcesImage = [
    {
        ...headerSmall.childImageSharp.fluid,
        media: '(max-width: 500px)',
    },
    {
        ...headerMedium.childImageSharp.fluid,
        media: '(max-width: 900px)',
    },
    {
        ...headerLarge.childImageSharp.fluid,
        media: '(max-width: 3840px)',
    },
];

将来源与 gatsby-image 一起使用：

<Img
    fluid={sources}
/>

Answer 2

Gatsby 中的流体图像跨越容器（例如：对于最大宽度为 800px 的容器，自动尺寸为：200px、400px、800px、1200px 和 1600px ）。如果您想更好地控制输出的大小，可以使用srcSetBreakpoints 参数。应用于您的代码：

configHowWeWork: file(relativePath: { eq: "howwework/howwework-header.jpg" }) {
    childImageSharp {
        fluid(maxWidth: 1920, srcSetBreakpoints: [ 400, 600, 960, 1280, 1920 ]) {
            ...GatsbyImageSharpFluid_withWebp
        }
    }
}

如您所见，srcSetBreakpoints 是一个包含自定义值的整数数组。这将为您的图片提供所需大小的srcSet。

你可以和他们一起玩，看看哪些符合你的要求。此外，我将删除maxHeight 参数，因为它可能会导致您进行限制查询，因为它限制了小尺寸图像的纵横比，它是使用提供的maxWidth 自动计算的。

另一个可能对您有所帮助的技巧是在某些分辨率下将 CSS object-fit 更改为 contain 属性以适应 100% 的容器。

参考资料/有趣的读物：

• Gatsby Image Documentation
• [gatsby-image] Possible to pass in custom "sizes" value?
• [gatsby-image] Scale image to height of container