CKEditor remove inline img style

ckeditor

Solution

Since version 4.1, CKEditor offers so called Content Transformations and already defines some of them. If you restrict in your `config.allowedContent` that you don't want to have `width` and `height` in `<img>` styles, then editor will automatically convert styles to attributes. For example:

CKEDITOR.replace( 'editor1', {
    allowedContent: 
        'img[!src,alt,width,height]{float};' + // Note no {width,height}
        'h1 h2 div'
} );

then:

<p><img alt="Saturn V carrying Apollo 11" class="left" src="assets/sample.jpg" style="height:250px; width:200px" /></p>

becomes in the output:

<p><img alt="Saturn V carrying Apollo 11" height="250" src="assets/sample.jpg" width="200" /></p>

and, as I guess, it completely solves your problem.

Problem

I am using a responsive image technique setting a max-width of 100% with CSS. This isn't working for any images added through CKEditor, as an inline style is added. In CSS I have added a style to override the width, which works, but height: auto doesn't, so the images is stretched. I need to find a way to stop CKEditor from adding the inline style in the first place. I am using CKEditor 4.x Thank you

Original source