Block images don't resize on Firefox, Safari, or Chrome

[tjrob]

📝 Provide detailed reproduction steps (if any)

After getting image upload to work, simply insert a large image into an empty form, use a resize handle to make it significantly smaller, then submit the form to a server that saves it as an HTML document.

Then display that HTML document in Firefox, Safari, or Chrome.

✔️ Expected result

When displaying the HTML document the image should be smaller and fit in the window.

❌ Actual result

The image is its full size. Often much larger than the window -- the browser's usual automatic resizing is disabled and you can only see a small part of a large image; there is a vertical scrollbar but no horizontal scrollbar.

That is, <figure class="image image_resized" style="width:63.92%;"> does not properly affect the size of the enclosed <img>, on either Firefox 111.0.1, Safari 16.4, or Chrome 111.0.5563 (these are the latest versions). It seems that <figure> does not do what CKEditor expects it to do, on any common browser.

Note the image is resized properly in the editor, but not when a browser displays the resulting HTML document.

❓ Possible solution

Force all images to be inserted inline. The documentation on how to do this simply does not work for me.

Or permit style="max-width:100%;" to apply, which would at least make a large block image visible. The documentation on how to do this simply does not work for me.

Note that if I type a single space before inserting the image, then it is inserted inline and resizing works. But getting my users to do this is problematical.

📃 Other details

• Browser: Firefox 111.0.1, Safari 16.4, or Chrome 111.0.5563
• OS: macOS Monterey 12.6.3 on a MacStudio (M1max processor)
• First affected CKEditor version: I have no idea how to tell; I downloaded it a few days ago
• Installed CKEditor plugins: Essentials, //Autoformat, Bold, Italic, Underline, Strikethrough, Subscript, Superscript, BlockQuote, Font, Heading, ImageInline, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, ImageResizeEditing, ImageResizeHandles, Link, List, Paragraph, Alignment, SimpleUploadAdapter, SourceEditing, GeneralHtmlSupport, SpecialCharacters, SpecialCharactersEssentials, (Some of these plugins are not used or are not working properly.)

I copied my app.js to app.js.txt and attached it.

app.js.txt

[Reinmar]

Hi! Can you reproduce this issue in any of our official demos?

[Witoso]

One comment from my side, please make sure you implemented the content styles. The max-width you mentioned is implemented on the CSS .ck-content .image img path by our styles that you need to add on the side of your app as well.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).