how to limit the size of image that gets submitted with a box

Question

Hello I'm using ckeditor to let users to post image but the thing is, the size of an image that user post can be too big. so I was wondering if I can use some css or javascript to hide the content(would be better to minimize the content but I don't have a clue how I can do that) if the content is too big that it goes out of the box. I'm using bootstrap panel as a box

<div class="panel-body">

{{ post.content|safe }}

    </div>

this post.content can't be too big that it goes out of panel-body, how should I prevent from it going out(hide the content)?

Answer 1

Try to put a max-width on your images, like this :

.panel-body img {
   max-width: 100%;
}

Answer 2

Use css .panel-body { overflow:hidden; } .panel-body { overflow:hidden; } on your container to hide the overflowing content (your image).

A more elegant solution can be to automatically resize your images to not overflow the container width. You can achieve this with

.panel-body img {
    max-width:100%;
}