JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="container">
        <div id="inner1"></div>
        <div id="inner2"></div>
    </div>

CSS

* {
            padding: 0;
            margin: 0;
        }

        #container {
            background-color: red;
            width: 800px;
            height: 500px;
            overflow: hidden;
        }
        #inner1 {
            width: 200px;
            height: 150px;
            margin-left: 200px;
            margin-top: 50px;
            background-color: lightgrey;
        }
        #inner2 {
            width: 100px;
            height: 200px;
            margin-left: 300px;
            margin-top: 50px;
            background-color: lightgrey;
        }

JavaScript

var wContainer = $("#container").width();
        var hContainer = $("#container").height();
        function setSize() {
            var hViewport = $(window).height();
            var wViewport = $(window).width();
            var factorx = wViewport / wContainer;
            var factory = hViewport / hContainer;
            if (factorx < factory) factor = factorx; else factor = factory;
            $("#container").css({ "transform": "scale(" + factor + ")", "transform-origin": "0 0" });

            //var ratio = 4 / 3; // Seitenverhältnis

            //// Hoehe und Breite des Fensters ermitteln
            //var hViewport = $(window).height();
            //var wViewport = $(window).width();
            //// Ist die Breite zu groß für das Seitenverhältnis?
            //if (wViewport / hViewport > ratio) {
            //    // Hoehe gleich Hoehe des Fensters setzen
            //    hContainer = hViewport;
            //    // und Breite entspr. Seitenverhältnis aus Hoehe ermitteln
            //    wContainer = hContainer * ratio;
            //} else {
            //    // Die Hoehe ist zu gross für das Seitenverhältnis
            //    // Breite gleich Breite des Fenster setzen
            //    wContainer = wViewport;
            //    // und Hoehe entspr. Seitenverhältnis aus Breite ermitteln
            //    hContainer = wContainer / ratio;
            //}
            //// Hoehe und Breite des Containers auf die ermittelten Werte setzen
            //$("#container").width(wContainer);
            //$("#container").height(hContainer);
        }
        setSize();

        // Größe des Container neu festlegen, wenn die Fenstergröße geändert wird
        $(window).on("resize", setSize);