MDXRenderer - Auto adjust image to container

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?

score 0 · Accepted Answer · answered Jan 25 '21 at 23:21

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?

MDXRenderer - Auto adjust image to container

1 Answers1