Question

我在这里（https://www.gatsbyjs.org/packages/gatsby-image/#avoiding-stretched-images-using-the-fluid-type）读到，即使Gatsby组件小于父容器元素的宽度，我也应该能够使它保持最大宽度。我相信我知道他们在文档中提供的代码示例中发生了什么，但是当我尝试将其调整为适合我的代码时，图像仍会拉伸以填充容器宽度。

他们的代码：

// in React component
const NonStretchedImage = props => {
  let normalizedProps = props
  if (props.fluid && props.fluid.presentationWidth) {
    normalizedProps = {
      ...props,
      style: {
        ...(props.style || {}),
        maxWidth: props.fluid.presentationWidth,
        margin: "0 auto", // Used to center the image
      },
    }
  }

  return <Img {...normalizedProps} />
}

注意：GatsbyImageSharpFluid片段不包括presentationWidth。您需要将其添加到您的graphql查询中，如以下代码片段所示：

{
  childImageSharp {
    fluid(maxWidth: 500, quality: 100) {
      ...GatsbyImageSharpFluid
      presentationWidth
    }
  }
}

我的代码：

// in React component
<Img
      fluid={data.myImage.childImageSharp.fluid}
      alt="description"
      fadeIn={true}
      style={{
        ...(props.style || {}),
        maxWidth: props.fluid.presentationWidth,
        margin: "0 auto", // Used to center the image
      }}
    />

// in GraphQL query
myImage: file(relativePath: { eq: "imageName.jpg" }) {
      childImageSharp {
        fluid(maxWidth: 400) {
          ...GatsbyImageSharpFluid_withWebp
          presentationWidth
        }
      }
    }

Answer 1

有时候，在您的CSS规则中添加!important可以解决问题。还要检查developer console内的渲染页面HTML输出。它们往往会创建很多嵌套的html，从而阻止您的CSS正常工作。

如何使液体Img成分小于其容器元素

1 个答案: