Fix aspect ratio in image container component on smaller screens (can…

…onical#5179)

* Fix aspect ratio utility on smaller screens

* Functionalize aspect ratio calculation & better document it

* Update _patterns_image.scss

update documentation to be more clear

* patch version bump for aspect ratio fix

* Switching to flexbox with image contained

* Revert "patch version bump for aspect ratio fix"

This reverts commit 8023d09.

---------

Co-authored-by: Bartek Szopka <bartek.szopka@canonical.com>

scss/_patterns_image.scss

@@ -27,15 +27,21 @@
   .p-image-container,
   [class^='p-image-container--'] {
     align-items: center;
-    display: grid;
+    display: flex;
     justify-content: center;
     text-align: center;
-    .p-image-container__image {
-      object-fit: contain;
-    }
+
     &.is-highlighted {
       background: $colors--theme--background-alt;
     }
+
+    .p-image-container__image {
+      // max height prevents the image from stretching the container
+      // when the aspect ratio is set, and object-fit ensures the aspect ratio
+      // of the image content is maintained
+      max-height: 100%;
+      object-fit: contain;
+    }
   }
 
   .p-image-container--16-9 {

templates/docs/examples/patterns/image/container/aspect-ratio/all.html

@@ -8,6 +8,12 @@
     <span>16:9</span>
     {% include 'docs/examples/patterns/image/container/aspect-ratio/16-9.html' %}
   </div>
+  <div>
+    <span>16:9 (with 16:9 image)</span>
+    <div class="p-image-container--16-9 is-highlighted">
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/7c9867c1-16x9.png" width="1200" alt="">
+    </div>
+  </div>
   <div>
     <span>3:2</span>
     <div class="p-image-container--3-2 is-highlighted">
@@ -20,6 +26,12 @@
       <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
     </div>
   </div>
+  <div>
+    <span>2:3 (with 2:3 image)</span>
+    <div class="p-image-container--2-3 is-highlighted">
+      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/e97cdac9-2x3.png" width="1200" alt="">
+    </div>
+  </div>
   <div>
     <span>2.4:1 (Cinematic)</span>
     <div class="p-image-container--cinematic is-highlighted">