javascript - 带有 gatsby 的响应式图像

Question

我正在使用 Gatsby-plugin-sharp 根据客户端的设备宽度自动使用最佳图像尺寸，但我似乎无法做到这一点。在 gatsby-plugin-sharp 的描述中，它说“ResponsiveSizes 为图像创建尺寸（宽度）。如果渲染的降价文件的容器的最大宽度为 800 像素，则尺寸将为：200、400、800 , 1200, 1600, 2400 – 足以为每种设备尺寸/屏幕分辨率提供接近最佳的图像尺寸。”

第一个问题：如何设置渲染的markdown文件的最大容器宽度？这引出了下一个问题：如何动态设置此宽度？假设客户端的窗口大小为 400px，我希望加载 400 的图像宽度。我该如何做到这一点？

当前 Graph QL 查询：

export const pageQuery = graphql`
query BlogPostBySlug($slug: String! ) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      timeToRead
      excerpt
      frontmatter {
        title
        cover
        date
        category
        tags
        thumbnail {
          childImageSharp {
            responsiveSizes(maxWidth: 800, quality: 50, cropFocus: CENTER, toFormat: JPG) {
              src
              srcSet
              sizes
              base64
            }
          }
        }
      }
      fields {
        slug
      }
    }
  }
`;