(styled component) Automatically set size to contain when reading html from firestore

I am trying to display parsed html from firestore on my page.

In firestore, the data looks like this (adapter used API provided by Piyush):

<p><strong>你看這張日落好漂亮</strong></p><ol><li>第一天</li><li>第二天</li><li>第三天</li></ol><figure class=”image”><img src=”https://noteyard-backend.herokuapp.com/uploads/62ca3e215215fc02f9f7c1c1.JPG”></figure><p>&nbsp;</p><figure class=”image”><img src=”https://noteyard-backend.herokuapp.com/uploads/62ca3e2a5215fc02f9f7c1c2.png”></figure><p>&nbsp;</p>

I used getDoc to read the data and parsed it with HTML parser. Now it looks like this on my page:

The image expands beyond the container with green border. I would like to set the image size to contain (or automatically fits the green container width) with styled component. Is there anyway I can adjust the width and height of every img tag within the html when displaying them on the page?

Here’s my code for the container

const Content = styled.div`
width: 80%;
border: solid green 1px;
min-height: 50vh;
font-size: 1.2rem;
margin-bottom: 1.5rem;
white-space: pre-line;

@media (max-width: 570px) {
font-size: 1rem;
}

`;

and here’s the JSX:

<Content>{parse(`${article.content}`)}</Content>

and I imported these on this page:

import styled from “styled-components”;
import parse from “html-react-parser”;

full code here: https://gist.github.com/juifuhung/76111c1baf3f974cb3b61fab739a01de
full page here: https://yolu-4a398.firebaseapp.com/article/yUVjYULnS8BZNPRYG4Rq