ratiobox

ratio box.scss

figure.ratio-box {
    height: 0;
    position: relative;
    background: var(--lightGrey);
    padding-top: 100%; //default. Correct padding is calculated and set inline in the module

    img {
        position: absolute;
        top: 0;
    }
}

ratio-box.twig

{% set imageinfo = imageinfo(item.image.file) %}
{% set ratiopct =  (imageinfo.info.height / imageinfo.info.width * 100)|replace(',','.') %}
{# {{ ratiopct }} #}

<!-- {{ item.block }} -->
<div class="component-image">

    <figure class="ratio-box"
        {% if ratiopct is not empty %} style="padding-top: {{ ratiopct }}%" {% endif %}>
        <img
        loading="lazy"
        data-zoomable
        data-zoom-src="{{ item.image.file|thumbnail(2000, 2000, 'r') }}"
        sizes=" (min-width: 1350px) 700px,
                (min-width: 1024px) 50vw,
                85vw"
        srcset="{{ item.image.file|thumbnail(800, 2000, 'r') }} 800w,
                {{ item.image.file|thumbnail(400, 1000, 'r') }} 400w"
        src="{{ item.image.file|thumbnail(800, 2000, 'r') }}" alt="{{ item.image.alt }}">
        <figcaption>{{ item.image.caption }}</figcaption>
    </figure>
</div>

<!-- /{{ item.block }} -->