From af064c19143d0f00818d0cce97b7cf69ec7b112c Mon Sep 17 00:00:00 2001
From: "Hubert Van de Walle (huvw)" <huvw@odoo.com>
Date: Sun, 26 Mar 2023 15:52:21 +0000
Subject: [PATCH] [FIX] web: ImageField size attribute not applied correctly in
 CSS

Steps to reproduce
==================

- Go to the product page
- Open studio
- Click on the picture and set the size to large
- Save and quit studio
- -> The size doesn't change

Port of https://github.com/odoo/odoo/pull/87087

opw-3217741

closes odoo/odoo#117423

X-original-commit: 63a3466c805c09989e5e022519e1ba450ecb1053
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>
Signed-off-by: Hubert Van De Walle <huvw@odoo.com>
---
 .../static/src/views/fields/image/image_field.js    |  6 ++++++
 .../static/tests/views/fields/image_field_tests.js  | 13 +++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/addons/web/static/src/views/fields/image/image_field.js b/addons/web/static/src/views/fields/image/image_field.js
index 43b03a3757f..fc9bd2eb810 100644
--- a/addons/web/static/src/views/fields/image/image_field.js
+++ b/addons/web/static/src/views/fields/image/image_field.js
@@ -74,9 +74,15 @@ export class ImageField extends Component {
         let style = "";
         if (this.props.width) {
             style += `max-width: ${this.props.width}px;`;
+            if (!this.props.height) {
+                style += `height: auto; max-height: 100%;`;
+            }
         }
         if (this.props.height) {
             style += `max-height: ${this.props.height}px;`;
+            if (!this.props.width) {
+                style += `width: auto; max-width: 100%;`;
+            }
         }
         return style;
     }
diff --git a/addons/web/static/tests/views/fields/image_field_tests.js b/addons/web/static/tests/views/fields/image_field_tests.js
index 5a41a083b39..17120822600 100644
--- a/addons/web/static/tests/views/fields/image_field_tests.js
+++ b/addons/web/static/tests/views/fields/image_field_tests.js
@@ -386,21 +386,34 @@ QUnit.module("Fields", (hooks) => {
                 </form>`,
         });
         const imgs = target.querySelectorAll(".o_field_widget img");
+
         assert.deepEqual(
             [imgs[0].attributes.width, imgs[0].attributes.height],
             [undefined, undefined],
             "if both size are set to 0, both attributes are undefined"
         );
+
         assert.deepEqual(
             [imgs[1].attributes.width, imgs[1].attributes.height.value],
             [undefined, "50"],
             "if only the width is set to 0, the width attribute is not set on the img"
         );
+        assert.deepEqual(
+            [imgs[1].style.width, imgs[1].style.maxWidth, imgs[1].style.height, imgs[1].style.maxHeight],
+            ["auto", "100%", "", "50px"],
+            "the image should correctly set its attributes"
+        );
+
         assert.deepEqual(
             [imgs[2].attributes.width.value, imgs[2].attributes.height],
             ["50", undefined],
             "if only the height is set to 0, the height attribute is not set on the img"
         );
+        assert.deepEqual(
+            [imgs[2].style.width, imgs[2].style.maxWidth, imgs[2].style.height, imgs[2].style.maxHeight],
+            ["", "50px", "auto", "100%"],
+            "the image should correctly set its attributes"
+        );
     });
 
     QUnit.test("ImageField: zoom and zoom_delay options (readonly)", async (assert) => {