[FIX] web_editor: preserve aspect ratio on non-responsive images

Since Bootstrap responsive behavior can't be guaranteed, we have to make
sure that images that didn't keep their original dimensions preserve
their aspect ratio. This can be achieved with the `object-fit: cover`
CSS property. We apply this on images that are not responsive and that
are alone in a div because these are the ones at risk.

opw-3244705
task-3334591

Part-of: odoo/odoo#125146

addons/web_editor/static/src/js/backend/convert_inline.js

@@ -510,6 +510,10 @@ function toInline($editable, cssRules, $iframe) {
             centeredImage.parentElement.style.setProperty('text-align', 'center');
         }
     }
+    // Ensure preservation of aspect-ratio.
+    for (const loneImage of editable.querySelectorAll('img:only-child:not(.img-fluid,[data-class*=fa-])')) {
+        loneImage.style.setProperty('object-fit', 'cover');
+    }
     // Fix img-fluid.
     for (const image of editable.querySelectorAll('img.img-fluid')) {
         // Outlook requires absolute width/height.