Documentation and resoning

scripts/libs.js

@@ -50,6 +50,10 @@ export const debounce = (func, wait, immediate) => {
 export const eagerImage = (block, length = 1) => {
   const imgs = Array.from(block.querySelectorAll('img')).slice(0, length);
   imgs.forEach((img) => {
+    const width = img.getAttribute('width');
+    const height = img.getAttribute('height');
+    const ratio = Math.floor((width / height) * 10) / 10;
+    img.style.aspectRatio = ratio;
     img.setAttribute('loading', 'eager');
     document.head.append(`<link rel="preload" as="image" href="${img.src}">`);
   });

styles/styles.css

@@ -11,6 +11,10 @@
   }
 }
 
+img {
+  object-fit: cover;
+}
+
 body {
   display: none;
   background-color: var(--scope-background, #fff);