Managing image size in django-markdownx

Question

Is there a way to apply CSS on the images I upload with django-markdownx? Or basically any way to dynamically adjust the size of the images posted inline with text in Django-base blog website?

I've tried all the regular ways:

<p style="max-width: 100%">{{ post.formatted_markdown|safe }}</p>

or:

<div class="card" style="max-width: 100%">
    <h2><a href="">{{ post.title }}</a></h2>
    <h5>published: {{ post.published_date }}, by: {{ post.author }}</h5>
    <div><img src="{{ post.main_image.url }}"></div>
    <p>{{ post.formatted_markdown|safe }}</p>
</div>

or:

<p class="markdown">{{ post.formatted_markdown|safe }}</p>

with CSS related

.markdown {
    max-width: 100%
}

None of these kept the image within the limits, if the raw size is wider than the screen it just goes beyond.

Is it just not possible to control the size of images added via django-markdownx? Is there another solution to easily manage a blog based on Django with posts with images inline with text?