Question

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

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

GraphQL查询：

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

盖茨比图像：

.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;
}

相关CSS ：

{{1}}

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

我已经尝试过的内容：

我试图在Gatsby查询中使用FILL来克服宽高比的约束，但这不是窍门。
使用presentationSize。

感谢您的回答。

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

盖茨比中的流体图像在整个容器上延伸（例如：对于最大宽度为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％的容器。

参考文献/有趣的读物：

盖茨比图像：以不同分辨率提供正确的图像尺寸

2 个答案: