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

【问题标题】：Gatsby.js - Responsive images using gatsby-image and gatsby-transformer-sharpGatsby.js - 使用 gatsby-image 和 gatsby-transformer-sharp 的响应式图像
【发布时间】：2020-08-05 07:44:56
【问题描述】：

我已经阅读了有关如何在 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>

移动设备再次调整大小，但桌面显示完整大小的图像，破坏了一切。

最好的问候

【问题讨论】：

我发现了问题。对于 gatsby v2，所有与图像处理相关的软件包都应适用于 v2。纱线添加 gatsby-image@next gatsby-plugin-sharp@next gatsby-transformer-sharp@next

标签： javascript reactjs gatsby

【解决方案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" 的行为

【讨论】：