diff --git a/cigaradvisor/blocks/imagecta/imagecta.css b/cigaradvisor/blocks/imagecta/imagecta.css index 8a053fdd..a72e837b 100644 --- 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; -} \ No newline at end of file + 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 index c9d30b33..60bf1ed7 100644 --- 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);