Full Bleed Layout images in gatsby-remark-image & mdx?

[rifqirosyidi]

Hi, i have a simple blog written in mdx, here i want to apply some images to have a "full-bleed" layout. however i have a difficulty to make this work,

config for gatsby-remark-image

{
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1000,
              showCaptions: true,
              wrapperStyle: fluidResult => `flex:${fluidResult.presentationHeight / fluidResult.presentationWidth * 100}%;`,
            },
          },
        ],
      },

in the blog post i have this image for example.

## Render Image 

[![Image by Freepik](./image/balance.jpg)](https://www.freepik.com/free-photo/top-view-balance-cubes_12975189.htm#query=balance&position=28&from_view=search&track=sph)

The rendered image will always have the same width as its container.

I attempted to create a custom CSS to handle this issue, but I encountered some challenges in getting it to work correctly.

I would greatly appreciate any suggestions you might have.