Editor's contentscss and "Image2 plugins" 100% width style not working properly

[Jirat Arinrith]

Hi!
I use "Image2" plugin and set "contentscss" to css file (works great!)

The issue happens when I create simple "image-fullwidth" class style, and apply it to the image with the Style dropdown. The editor doesn't preview it as 100% full width, instead showing original size (aligning and other styling work great). Please note that there's no problem on the front website, the image is displayed 100% width correctly.

I used dev tool to dig it and I've found the class .cke_widget_inline, on <span> element that wraps the image, has "display: inline-block". Try changing it to "block" solves half of the problem, image is displayed 100% width now. However, it doesn't respect image's height. (I remove height from image anyway so that it won't look disproportionated).

Browser & OS: Chrome version 41.0.2272.89 (64-bit) / OS X 10.9.5

Build Config:

var editor = CKEDITOR.replace(controlID, {
    height: 400,
    uiColor: '#fafafa',
    extraPlugins: 'image2',
    image2_alignClasses: [ 'image-left', 'image-center', 'image-right' ],
    image2_captionedClass: 'image-captioned',
    removePlugins: 'save,newpage,preview,print,forms,find,selection,spellchecker,bidi',
    removeButtons: 'SelectAll,Scayt,Subscript,Superscript,Language,Flash,Table,Iframe,Font',
    contentsCss: '/admin/styles/editor.css'
});

[Jirat Arinrith]

screenshot

[Jirat Arinrith]

build-config.js