Gatsby.js - 使用 gatsby-image 和 gatsby-transformer-sharp 的响应式图像

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>

...

必须在 bootstrap 4 中复制 class = "img-fluid" 的行为