3

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

当窗口大小很大时，您可以在此处看到图像。当窗口大小较小时。

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

我已经尝试过的：

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

谢谢你的回答。

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

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

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

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

4

2 回答 2

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}
/>
于 2020-12-27T15:02:43.500 回答
0

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

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

参考资料/有趣的读物：

于 2020-09-17T17:02:18.107 回答