MDXRenderer - Auto adjust image to container - reactjs

Question

I have created a simple default page that gets rendered with content (images and text) from GraphCMS.
I can query and display the content, but I'm not sure how to make the images adjust to the view/container, as I don't know how to access the image and set a CSS class.
I'm using the plugin "gatsby-plugin-mdx" to render the following:
page.content.markdownNode.childMdx.body
Here is my DefaultPage.tsx file:
import React from "react"
import Layout from "../layout/layout"
import styled from "styled-components"
import { H1, BodyMain } from "../styles/TextStyles"
import { MDXRenderer } from "gatsby-plugin-mdx"
export default function DefaultPageTemplate({ pageContext: { page } }) {
return (
<Layout>
<Wrapper>
<HeaderWrapper>
<TextWrapper>
<TitleWrapper>{page.title}</TitleWrapper>
<SubtitleWrapper>{page.subtitle}</SubtitleWrapper>
</TextWrapper>
</HeaderWrapper>
<ContentWrapper>
<MDXRenderer>{page.content.markdownNode.childMdx.body}</MDXRenderer>
</ContentWrapper>
</Wrapper>
</Layout>
)
}
const Wrapper = styled.div``
const HeaderWrapper = styled.div`
min-height: 300px;
color: #ffffff;
background-color: #339861;
display: grid;
justify-content: center;
align-items: center;
padding: 30px;
`
const TextWrapper = styled.div`
text-align: center;
`
const TitleWrapper = styled(H1)``
const SubtitleWrapper = styled(BodyMain)``
const ContentWrapper = styled.div`
margin: 1rem;
`
Below is a screenshot of the behaviour:
Below is a screenshot of when I'm inspecting the element in the browser. It appears that the image is wrapped in a paragraph:
Can you help me to understand how to scale the image for smaller views/screens?

Answer 1

It seems like I was able to target the image within the gatsby-browser.js and give it a width of 100%.
my gatsby-browser.js file:
import "./src/components/layout/layout.css"
import React from "react"
import { MDXProvider } from "#mdx-js/react"
const H1 = props => (
<h1 style={{ fontSize: "60px", fontWeight: "bold" }} {...props} />
)
const H2 = props => (
<h2 style={{ fontSize: "40px", fontWeight: "bold" }} {...props} />
)
const H3 = props => (
<h2 style={{ fontSize: "30px", fontWeight: "bold" }} {...props} />
)
const H4 = props => (
<h4 style={{ fontSize: "25px", fontWeight: "bold" }} {...props} />
)
const H5 = props => (
<h4 style={{ fontSize: "20px", fontWeight: "bold" }} {...props} />
)
const H6 = props => (
<h4 style={{ fontSize: "18px", fontWeight: "bold" }} {...props} />
)
const MyParagraph = props => (
<p style={{ fontSize: "20px", lineHeight: 1.6 }} {...props} />
)
const Strong = props => <strong style={{ fontWeight: "bold" }} {...props} />
const MyImage = props => (
<img style={{ maxWidth: "100%", borderRadius: "15px" }} {...props} />
)
const components = {
h1: H1,
h2: H2,
h3: H3,
h4: H4,
h5: H5,
h6: H6,
p: MyParagraph,
strong: Strong,
img: MyImage,
}
export const wrapRootElement = ({ element }) => (
<MDXProvider components={components}>{element}</MDXProvider>
)
Any other or better recommendations/solutions?