[FIX] website_sale, *: make the product image container not editable

*: web_editor

It prevents user writing in the image preview of products.
Also, the product image view now fit its container so that the user can
click wherever in the frame to change the picture.

Part of https://github.com/odoo/odoo/pull/68823
task-2446852

closes odoo/odoo#68850

X-original-commit: e4f06666307e79b9a5b26357a1545a56e6bd40b2
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/src/js/wysiwyg/wysiwyg.js

@@ -92,6 +92,10 @@ const Wysiwyg = Widget.extend({
                     $field.attr('contenteditable', false);
                     $field.find('.oe_currency_value').attr('contenteditable', true);
                 }
+                if ($field.data('oe-type') === "image") {
+                    $field.attr('contenteditable', false);
+                    $field.find('img').attr('contenteditable', true);
+                }
                 if ($field.is('[data-oe-many2one-id]')) {
                     $field.attr('contenteditable', false);
                 }

addons/website_sale/static/src/scss/website_sale.scss

@@ -188,7 +188,9 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
         text-align: center;
 
         img {
-            max-height: 100%;
+            height: 100%;
+            width: 100%;
+            object-fit: scale-down;
         }
     }
     .o_wsale_product_information {
@@ -572,6 +574,14 @@ a.no-decoration {
     .carousel-outer {
         height: 400px;
         max-height: 90vh;
+
+        .carousel-inner {
+            img {
+                height: 100%;
+                width: 100%;
+                object-fit: scale-down;
+            }
+        }
     }
 
     .carousel-control-prev .fa {