.mdx文件中的流体图像

Question

有什么方法可以使导入到.mdx文件中的图像成为流体吗？我有一个基于mdx文件发布的Gatsby站点，我安装了gatsby-remark-image-attributes和gatsby-remark-images。

​

{
      resolve: `gatsby-plugin-mdx`,
      options: {
        defaultLayouts: {
          posts: require.resolve("./src/templates/blog-post.js"),
          default: require.resolve("./src/components/layout.js"),
        },
        extensions: [`.mdx`, `.md`],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 966,
              withWebp: true,
            },
          },
          {
            resolve: `gatsby-remark-image-attributes`,
            options: {
              styleAttributes: true,
              dataAttributes: false
            },
          },
          {
            resolve: `gatsby-remark-highlight-code`,
          },
        ]
      },

​

这种风格似乎很管用，但我在mdx文件中传递的图像一点也不流畅。

![IO thumbnail](img.jpg#lightbox=true;max-width=270px;margin-right=23px)

有没有人知道是否有可能在mdx文件中有流体图像？

Answer 1

添加如下内容如何：

{
  resolve: `gatsby-remark-images`,
  options: {
    maxWidth: 800,
    wrapperStyle: fluidResult => `flex:${_.round(fluidResult.aspectRatio, 2)};`,
  },
}

致词：

免责声明：_代表lodash dependency。正如您在package.json (line 15)中看到的，它是gatsby-remark-images的一个依赖项。我不建议安装一个很大的库，因为lodash只适用于这个实用程序，因为它会增加包的大小。您可以使用一些普通的JavaScript方法来实现与_.round相同的结果，但是出于测试目的，尝试使用lodash来了解您是否能够使用此方法创建流体包装器可能会很有趣。