[FIX] website_sale: constraint height on product page img

In commit[1] we implemented improvement for the images on the product
page which makes the single image fill the total width of the column.

While it was fitting most of cases, uploading an image with particular
aspect ratio w/ a height significantly longer than the width will render
a very long image, extending the page.

This fix constraints the height to a maximum of 75vh, avoiding extra
long images.

Note: the fix is done in CSS to be stable friendly, in master the goal
will be to implement a dropdown allowing precise aspect ratio for single
images. This will require improvement on the way the carousel / grid
render it's single image. This will likely be handled in the e-commerce
redesign (task-4252024)
[1]: odoo/odoo@da76f10558ea240a5f1b539cd4ce3ed3fc6628ab

opw-4458614
task-4522225

closes odoo/odoo#195573

Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>

1 files changed, 11 insertions, 0 deletions

diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index 0a84c2f72c1..a1928738891 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -515,6 +515,17 @@ a.no-decoration {
     text-decoration: none !important;
 }
 
+// TODO remove this styling and improve the image template on master to better
+// distinguish single / multiple images regardless of grid/carousel.
+// The goal is to constraint the height on extra long images.
+.o_wsale_product_page_grid_column div:only-child,
+#o-carousel-product .carousel-item:only-child {
+    img {
+        max-height: 75vh !important;
+        object-fit: contain;
+    }
+}
+
 #o-carousel-product {
     transition: top 200ms;