Question

我已经阅读了有关如何在gatsby.js中创建不同大小的响应图像的信息

我设法在小型设备上做到了这一点，并且效果很好，但在台式机上，图像未包含在父容器中并已调整大小，但显示为全尺寸。

这是我的查询

export const pageQuery = graphql`
  query {
    allImageSharp {
      edges {
        node {
          ... on ImageSharp {
            fluid {
              src
            }
          }
        }
      }
    }
    fluidImages: file(relativePath: { regex: "/web-development/" }) {
      childImageSharp {
        fluid(duotone: { highlight: "#f00e2e", shadow: "#192550" }) {
          base64
          aspectRatio
          src
          srcSet
          srcWebp
          sizes
        }
      }
    }
  }
`

这是我显示图像的代码：

const { data } = this.props
const webdev = data.fluidImages.childImageSharp.fluid
<picture>
    <source srcSet={webdev.srcSet} sizes={webdev.sizes}/>
    <img alt="Web Development" src={webdev.src} />
</picture>

移动一次可以调整大小，但是台式机显示的是全尺寸图像，会破坏一切。

最诚挚的问候

Answer 1

尝试以下代码：

export default props => {
  const { fluid } = props.data.fluidImage.childImageSharp

  return (

<div style={{ maxHeight: "100%" }}>
        <Img
          fluid={fluid}
          style={{ maxHeight: "100%" , height: "100vh" }}
           imgStyle={{ objectFit: "contain" }}
        />
        </div>

...

必须在引导程序4中复制class =“ img-fluid”的行为

Gatsby.js-使用gatsby-image和gatsby-transformer-sharp

1 个答案: