fix: responsive aspect ratios don't work with intermediate elements (#…

…5402)

* Handle intermediate image container divs

* Tweak responsive example

* change aspect ratios

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "4.18.0",
+  "version": "4.18.1",
   "author": {
     "email": "[email protected]",
     "name": "Canonical Webteam"

scss/_patterns_image.scss

@@ -84,6 +84,11 @@ $aspect-ratios: (
     justify-content: center;
     text-align: center;
 
+    // If there is a child element that is not the image, don't let it affect the layout
+    & > *:not(.p-image-container__image) {
+      display: contents;
+    }
+
     &.is-highlighted {
       background: $colors--theme--background-alt;
     }

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

@@ -4,8 +4,9 @@
 {% block standalone_css %}patterns_image{% endblock %}
 
 {% block content %}
-  <div class="p-image-container--cinematic-on-large p-image-container--16-9-on-medium p-image-container--2-3-on-small is-highlighted">
-    <img class="p-image-container__image"
-         src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
+<div class="p-image-container--square-on-small p-image-container--16-9-on-medium p-image-container--cinematic-on-large is-highlighted">
+  <div class="lazyloaded">
+    <img src="https://assets.ubuntu.com/v1/f74cb1d3-streaming%20data.png" alt="" width="852" height="1279" loading="lazy" class="p-image-container__image">
   </div>
+</div>
 {% endblock %}