JSFiddle - React, Tailwind, and code Playground

by sarahwhatsup

HTML

<body>
    <div class="wrapper">
        <div class="square">
            <div class="inside1">
                <div class="inside2"></div>
            </div>
        </div>
       
    </div>
</body>

CSS

.wrapper {
    width:70%;
    position: relative;
    margin: 0 auto;
    background:#ccc;
    height:auto;
}

.square {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background-color: #7ad;
    -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    -o-transform-origin: center top;
    transform-origin: center top;
}
.inside1 {
    width: 200px;
    background:#609;
    height:200px;
}
.inside2 {
    width: 100px;
    background:#66F;
    height:100px;
}

JavaScript

$(window).load(function () {
    console.log( "window load" );
    function zoomSquare() {
        var $square = $('.square');

        var vh = $square.parent().width(); // Get the height of whatever the parent of square is
        var squareHeight = $square.width(); // Grab the height of .square
        var desiredHeight = Math.round(vh * 0.95);
        var zoom = (desiredHeight / squareHeight);

        //$square.css('zoom', zoom);
        $square.css('-webkit-transform', 'scale(' + zoom + ')');
        $square.css('-moz-transform', 'scale(' + zoom + ')');
        $square.css('-o-transform', 'scale(' + zoom + ')');
        $square.css('transform', 'scale(' + zoom + ')');
    }

    // When the browser is resized
    $(window).on('resize', function () {
        console.log( "resize" );
        zoomSquare();
    });

    // When the page first loads
    $(document).ready(function () {
        console.log( "dom ready" );
        zoomSquare();
    });

});