Fluid images from .mdx file in Gatsby

[EmaProv]

there's a way to make fluid an image imported in a .mdx file? I have a Gatsby site base on mdx file post, I install gatsby-remark-image-attributes and 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`,
          },
        ]
      },

The style seems to work, but the images I pass in my mdx files aren't fluid at all.

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

Dose anyone knows if it is possible to have fluid images in mdx file?

[ChristianMurphy]

To clarify, MDX is a language, a mix of Markdown with JSX.
Anything that is possible in JSX/JS is also possible in MDX, but wouldn't be done by MDX itself, it would be done by a plugin/component provided by you, or the platform you are using.

Does anyone knows if it is possible to have fluid images in mdx file?

Likely yes, though it wouldn't necessarily be MDX specific, it would likely be provided by the platform, in your case Gatsby.

Also can you clarify what you mean by fluid?
Do you mean responsive to different screensizes? If so how to you want it to respond? Or do you mean image optimization like gatsby-plugin-images? Or something else entirely?

[EmaProv]

It was fixed. Now the images from gatsby-remark-images are responsive.