React-markdown: how to scale image

Created on 25 May 2018 · 2Comments · Source: remarkjs/react-markdown

My page contains a large image which stretch beyond the width of this component.
I want the image to contain.

🙋 typquestion

Source

ldn0x7dc

Most helpful comment

Use a custom renderer for the image type and specify a class name or inline styles:

function Image(props) {
  return <img {...props} style={{maxWidth: '100%'}} />
}

<Markdown
  source="![Espen](https://espen.codes/assets/img/avatar-colored.jpg)"
  renderers={{image: Image}}
/>

You'll have to figure out the right approach to styling it yourself, but this should give you all the flexibility you need.

rexxars on 25 May 2018

👍22 🎉2

All 2 comments

Use a custom renderer for the image type and specify a class name or inline styles:

function Image(props) {
  return <img {...props} style={{maxWidth: '100%'}} />
}

<Markdown
  source="![Espen](https://espen.codes/assets/img/avatar-colored.jpg)"
  renderers={{image: Image}}
/>

You'll have to figure out the right approach to styling it yourself, but this should give you all the flexibility you need.

rexxars on 25 May 2018

👍22 🎉2

Thanks for the custom renderer code. Are there any plans to support scaling like mentioned at https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#images? I may have some time in the future to draft a PR.