Background image fitting content

scripts/scripts.js

@@ -379,6 +379,9 @@ function decorateSectionsWithBackgrounds(element) {
       const backgroundPic = createOptimizedPicture(background);
       backgroundPic.classList.add('background-image');
       section.append(backgroundPic);
+      if (section.querySelector('.section-container')?.children.length === 0) {
+        section.classList.add('no-content');
+      }
     }
   });
 }

styles/styles.css

@@ -146,8 +146,24 @@
   --split-lastthird: 66%:34%;
 }
 
+
 *, *::before, *::after { box-sizing: inherit; }
 
+/* this selects the sections that have a background image and other blocks
+  and sets them as the container for the query below
+  sections with background images only get ignored */
+  div.section.with-background-image:not(.no-content) {
+    container-name: text-container;
+    container-type: inline-size;
+  }
+
+  /* this updates the height of the content inside the section */
+  @container text-container (max-width: 991px) {
+     body > main > div.with-background-image > picture img {
+      height: 100cqh;
+    }
+  }
+
 html {
   scroll-behavior: smooth;
   box-sizing: border-box;