JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="container">

</div>

CSS

* {
    padding: 0;
    margin: 0;
}
#container {
    background-color: lightgrey;
}

JavaScript

function setSize() {
    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);