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

Question

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

Here you can see the image when window size is big. Here 当 window 尺寸较小时。

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（裁剪或剪裁是我想要的）的图像想要，但没有放大）没有拉伸高度。

我已经尝试过的:

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

感谢您的回答。

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

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

我确信我遗漏了一些东西，因为创建一个响应式宽幅英雄形象并不难。

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

Answer 1

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% 的容器。

References/Interesting 读数：

Answer 2

我克服了 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}
/>

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

Gatsby-image: provide the right image size to different resolution

gatsby

gatsby-image

gatsby-plugin