Reputation: 8105
When using CKEditor and inserting an image in the editor, the image is displayed at its real size.
So if my CKeditor is 500px wide, and the image is 800, the image is displayed at 800 wide and therefor there is a scroll bar in the CKeditor.
Is there a way to make the inserted image only show in the editor as the width of the editor itself?
Thanks!
Upvotes: 3
Views: 3944
Reputation: 91
There are two possible solutions to this:
A) change the image widget, that it generates an image tag with a specific class, eg. "imagePointer" and then, in the widget, add the responding css, like:
CKEDITOR.plugins.add( 'image', {
onLoad: function( editor ) {
CKEDITOR.addCss(
'.imagePointer {max-width:100%;}')
}
}
B) in the contents.css file simply add the rule for the image tag:
img {max-width:100%}
Upvotes: 1