Responsive images in CKEditor?

Question

Is there a way to set an image width to 100% of its parent?

At the minute I'm using Enhanced Image with a nicely styled figure tag for captions, but until the image fits the width of the figure it's pretty much useless!

Thanks!

Answer 1

Add this in your CSS file:

img {
    max-width: 100%;
    height: auto !important;
}

Or, try this gist.

Answer 2

After trying for so long I got a manual solution for making the image responsive in the CKEditor Django. After a adding the image in editor, put "style width:100%" manual in Image Properties

This work in my case but we have to manually add this field.