:root {
    --top-buffer: 80px;      /* space for header */
    --bottom-buffer: 60px;   /* space for footer */
    --content-height: 800px; /* internal height of iframe content */
}

#iframe-wrapper {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--top-buffer) - var(--bottom-buffer));
    overflow: hidden;
}

#iframe-wrapper iframe {
    width: 100%;
    height: var(--content-height);
    border: none;

    transform-origin: top center;
    transform: scale(var(--scale-factor));
}


<div id="iframe-wrapper">
    <iframe id="viewer" src="gallery.html"></iframe>
</div>

<script>
function scaleIframe() {
    const wrapper = document.getElementById("iframe-wrapper");
    const iframe = document.getElementById("viewer");

    const availableHeight = wrapper.clientHeight;
    const contentHeight = parseFloat(
        getComputedStyle(document.documentElement)
            .getPropertyValue("--content-height")
    );

    const scale = availableHeight / contentHeight;
    iframe.style.setProperty("--scale-factor", scale);
}

window.addEventListener("load", scaleIframe);
window.addEventListener("resize", scaleIframe);
</script>