Aspect ration 16:9 when resizing an app that attaches to a holder HTML element

Questions
1

I just now discovered that my apps I previously made all don't behave 100% correctly when you resize the browser window.

I made a little demo at Testing

There the ZIM code attaches to the DIV with id "holder"

I also know that internally ZIM creates a #holderCanvas , so I styled this one with css too.

But.... when I resize the browser window, then the ZIM part on canvas only resizes the width but never the height, although I explicitly demand an aspect ratio of 16:9

When you resize the windows (its width) and then reload the page, then height is correct again and obbeys the 16:9 ratio.

Do I have to change something to make this resize LIVE ?

When I inspect the page, then I see that both the #holder AND #holderCanvas obbey to the 16:9 ratio, but the canvas doesn't change.

<!DOCTYPE html>
<html lang="nl">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Testing</title>
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <style>
        #holderCanvas {
            width: 100% !important;
            margin-top: 12px;
            aspect-ratio: 16 / 9 !important;
        }

        body {
            background-color: #5594df;
        }
    </style>


    <script type="module">
        import "https://zimjs.org/cdn/019/zim";

        // See Docs under Frame for FIT, FILL, FULL, and TAG
        new Frame("holder", 1920, 1080, light, null, ready);
        function ready() {

            new Circle(100, purple)
                .center()
                .drag();

        }
    </script>
</head>

<body>

    <header>
        <div class="container bg-black text-white p-3">
            Here comes siteheader
        </div>
    </header>
    <main>
        <div class="container py-5 bg-white" style="border:2px solid black;">
            <div class="row">
                <div class="col-12">
                    <h1>Title</h1>
                </div>
            </div>
            <div class="row bg-white">
                <div id="holder" style="background-color:#00f;width:100%;aspect-ratio:16/9;"></div>
            </div>
        </div>
    </main>

    <footer>
        <div class="container bg-black text-white p-3">
            Copyright &copy;2026 Bart Libert (EducaSoft)
        </div>
    </footer>
</body>

</html>
2

And... solved it myself, but I'll put the answer here in case somebody has the same problem

<!DOCTYPE html>
<html lang="nl">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Testing</title>
    <link rel="stylesheet" href="/assets/css/bootstrap.min.css">
    <style>
        #holder {
            width: 100%;
            aspect-ratio: 16 / 9;
            position: relative;
            overflow: hidden;
        }

        #holderCanvas {
            width: 100% !important;
            height: 100% !important;
            display: block;
        }

        body {
            background-color: #5594df;
        }
    </style>


    <script type="module">
        import "https://zimjs.org/cdn/019/zim";

        // See Docs under Frame for FIT, FILL, FULL, and TAG
        new Frame("holder", 1920, 1080, light, null, ready);
        function ready() {

            new Circle(100, purple)
                .center()
                .drag();

        }
    </script>
</head>

<body>

    <header>
        <div class="container bg-black text-white p-3">
            Here comes siteheader
        </div>
    </header>
    <main>
        <div class="container py-5 bg-white" style="border:2px solid black;">
            <div class="row">
                <div class="col-12">
                    <h1>Title</h1>
                </div>
            </div>
            <div class="row bg-white">
                <div id="holder" style="padding:0;"></div>
            </div>
        </div>
    </main>

    <footer>
        <div class="container bg-black text-white p-3">
            Copyright &copy;2026 Bart Libert (EducaSoft)
        </div>
    </footer>
</body>

</html>
3

I think the canvas tag holds the aspect ratio automatically even if you do not set aspect ratio. So make the holder 100% and then the canvas width 100% and set canvas height to auto. I don't think we used to have to set the height to auto, but that came up recently for me and I was surprised. Anyway - glad you solved it - makes sense if you set the aspect ratio of the holder and then the 100% on canvas width and height.