Fix CLS for images in initial viewport

hlxsites · Jan 25, 2024 · d0f1c6d · d0f1c6d
1 parent e612604
commit d0f1c6d
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/cigaradvisor/scripts/scripts.js b/cigaradvisor/scripts/scripts.js
@@ -79,6 +79,15 @@ async function decorateTemplate(main) {
   }
 }
 
+function decoratePictures(main) {
+  main.querySelectorAll('.default-content-wrapper picture').forEach((picture) => {
+    const img = picture.querySelector('img');
+    const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100;
+    picture.style.paddingBottom = `${ratio}%`;
+    picture.style.maxWidth = `${img.width}px`; // Prevent pixelation
+  })
+}
+
 /**
  * Builds two column grid.
  * @param {Element} main The container element
@@ -143,6 +152,7 @@ export async function decorateMain(main) {
   await buildAutoBlocks(main);
   decorateSections(main);
   decorateBlocks(main);
+  decoratePictures(main);
   buildLayoutContainer(main);
 }
 

diff --git a/cigaradvisor/styles/styles.css b/cigaradvisor/styles/styles.css
@@ -212,9 +212,6 @@ li {
   display: none;
 }
 
-.default-content-wrapper {
-  color: var(--clr-text);
-}
 
 .icon > img {
   width: var(--icon-size);
@@ -265,6 +262,10 @@ main .section.stylized-header > .default-content-wrapper > h2 {
   font-size: var(--heading-font-size-m);
 }
 
+main .default-content-wrapper {
+  color: var(--clr-text);
+}
+
 main .button-container {
   padding: 10px 10px 40px;
   text-align: center;
@@ -303,6 +304,25 @@ main .button-container .button:hover {
   text-decoration: none;
 }
 
+main .default-content-wrapper picture {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+}
+
+main .default-content-wrapper picture > img {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+
 @media screen and (min-width: 600px) {
   h1 {
     font-size: 35px;