Responsive images in CKEditor?

user_7960442 0
Viewed 4803

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!

ckeditor
3 Answers

Add this in your CSS file:

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

Or, try this gist.

user_55118490

Thank you for providing details and sorry for late reply.

In order to make the image 100% width of the figure please open ckeditor\contents.css file, find the selector for figure element and remove the padding: 10px; declaration. Next refresh your page and you should be good to go.

enter image description here

user_45550780

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

1

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

user_148872620
Related