You can solve this by creating a custom CSS file for CKEDITOR.

Upload the custom CSS file wherever you want to house it, such as your theme folder.

Add to the custom CSS file definitions for your image classes or data attributes which are used for your rendered pages.

Example: /sites/all/themes/THEMENAME/css/editor.css

img.class-small {
  width: 100px;
  height: auto;
}      

[data-picture-align="right"] {
  float: right;
}

[data-picture-group="medium"] {
  max-width: 310px;
  height: auto;
}

Go to admin/config/content/ckeditor and edit the relevant profile.

Open the CSS area and select "Define CSS" and then enter the path to the CSS file you created. eg. "/sites/all/themes/THEMENAME/css/editor.css"

Now when you are in the editor itself the editor will reference that custom CSS file and draw the image as you have designated it. You can mimic all the same responsive style by using responsive CSS for your editor the same as you use for your site.

You can solve this by creating a custom CSS file for CKEDITOR.

Upload the custom CSS file wherever you want to house it, such as your theme folder.

Add to the custom CSS file definitions for your image classes or data attributes which are used for your rendered pages.

Example: /sites/all/themes/THEMENAME/css/editor.css

img.class-small {
  width: 100px;
  height: auto;
}      

[data-picture-align="right"] {
  float: right;
}

[data-picture-group="medium"] {
  max-width: 310px;
  height: auto;
}

Go to admin/config/content/ckeditor and edit the relevant profile.

Open the CSS area and select "Define CSS" and then enter the path to the CSS file you created. eg. "/sites/all/themes/THEMENAME/css/editor.css"

Now when you are in the editor itself the editor will reference that custom CSS file and draw the image as you have designated it. You can mimic all the same responsive styles by using responsive CSS for your editor the same as you use for your site.