问题描述
我正在努力为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。
感谢您的回答。
解决方法
我克服了 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}
/>
盖茨比中的流体图像在整个容器上延伸（例如：对于最大宽度为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％的容器。
参考文献/有趣的读物：