Hi,
Appearantly it's not possible to change the code the drag & drop editor is inserting. Instead you can wrap that code in a div and set a max-with for the div.
This:
<img class="acym__wysid__media__inserted"
style="max-width: 100%; height: auto; box-sizing: border-box; padding: 0 5px; display: inline-block; margin-left: auto; margin-right: auto;"
src="https://www.example.com/images/example.jpg" alt="" title=""
data-mce-src="https://www.example.com/images/example.jpg"
data-mce-style="max-width: 100%; height: auto; box-sizing: border-box; padding: 0 5px; display: inline-block; margin-left: auto; margin-right: auto;"
height="675" width="675">
Becomes this:
<div style="max-width:50%;">
<img class="acym__wysid__media__inserted"
style="max-width: 100%; height: auto; box-sizing: border-box; padding: 0 5px; display: inline-block; margin-left: auto; margin-right: auto;"
src="https://www.example.com/images/example.jpg" alt="" title=""
data-mce-src="https://www.example.com/images/example.jpg"
data-mce-style="max-width: 100%; height: auto; box-sizing: border-box; padding: 0 5px; display: inline-block; margin-left: auto; margin-right: auto;"
height="675" width="675">
</div>
Otherwise you could add some custom css. Please add a HTML-ID for the block, so the code will be applied only to that particular block.
#YOUR-HTML-ID .acym__wysid__media__inserted {
max-width: 50% !important;
}