Incorrect image width when outer css exists

[0w0c]

Hi, It's me again. I found an issue when using TinyMCE inside a bootstrap styled page.

Here's my sample code on https://fiddle.tiny.cloud/

<style>
img{max-width:100%;}
</style>
<script type="text/javascript">
  tinymce.init({
    selector: "textarea",
    plugins: ["image"],
    toolbar: "image",
  });
</script>
<form method="post" action="dump.php"><textarea name="content"></textarea></form>

Paste the following url into "Source" in "Image" button: (Test image from Bing background) https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wyTq The image origin size 1920x1080, but the width/height on "Image" window is not the same. When you zoom out browser size, paste URL again, the width/height will be smaller. Screenshot: https://images2.imgbox.com/57/0d/cLi7YH9z_o.png

Whatever the browser size is, the width/height keep the same as image origin size. However, when outer css style img{max-width:100%;} added, width/height become the browser size. The way to fix the issue I found is to remove global css style img{max-width:100%;} or cover it with other css.

There're lots of front-end packages like Bootstrap have default css img{max-width:100%;}. It's better to find a way making TinyMCE be independent of the editing page css styles.

Thank you! Best

[yacodes]

Hi @aaa-aa-a, thanks for reporting this. However, I'm not sure what behaviour is expected here. Tiny's image popup window does not indicate that the width and height are original to the image, but the inserted ones.

This also can be fixed by adding CSS like this:

.mce-content-body img { max-width: none; }

Will close the issue, because I see no escalation here.