Save space for the image.

hlxsites · Dec 4, 2023 · cd773a0 · cd773a0
1 parent ec30578
commit cd773a0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/cigaradvisor/blocks/imagecta/imagecta.css b/cigaradvisor/blocks/imagecta/imagecta.css
@@ -1,9 +1,21 @@
-.home-tall-banner > a img{
+.imagecta.block > a {
+  display: block;
+  margin: 0 auto;
+}
+
+.imagecta.block > a picture {
   display: block;
   position: relative;
-  max-width: 100%; 
-  max-height: 100%;
-  width: auto; 
-  height: auto; 
-  border: 1px solid #000;
-}
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+}
+
+.imagecta.block > a picture > img {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+}
diff --git a/cigaradvisor/blocks/imagecta/imagecta.js b/cigaradvisor/blocks/imagecta/imagecta.js
@@ -1,7 +1,15 @@
 export default async function decorate(block) {
   const children = [];
   const anchor = document.createElement('a');
-  anchor.append(block.querySelector('picture'));
+  const picture = block.querySelector('picture');
+  const img = picture.querySelector('img');
+  const ratio = (parseInt(img.height, 10) / parseInt(img.width, 10)) * 100;
+  picture.style.paddingBottom = `${ratio}%`;
+  anchor.style.maxWidth = `${img.width}px`;
+
+
+
+  anchor.append(picture);
   anchor.setAttribute('href', block.querySelector('a').getAttribute('href'));
   children.push(anchor);
   block.replaceChildren(...children);