JSFiddle - React, Tailwind, and code Playground

by davidcl64

HTML

<div id="wrap">
<div id="outer">
    <div id="inner"></div>
    <div id="text">Lorem ipsum</div>
</div>
</div>

CSS

#wrap {
    position: relative;
    width: 640px;
    height: 480px;
    background-color: red;
}
#outer {
    position: relative;
    width: 640px;
    height: 480px;
    background: url('http://placekitten.com/640/480') no-repeat center center;
    -webkit-transform-origin: top left;
}
#inner {
    background: url('http://placekitten.com/100/100') no-repeat center center;
    position: absolute;
    top: 120px;
    left: 120px;
    width: 100px;
    height: 100px;
}
#text {
    font-size: 40px;
    position: absolute;
    right: 100px;
    bottom: 100px;
}

JavaScript

var maxWidth  = $('#outer').width();
var maxHeight = $('#outer').height();

$(window).resize(function(evt) {
    var $window = $(window);
    var width = $window.width();
    var height = $window.height();
    var scale;

    // early exit
    if(width >= maxWidth && height >= maxHeight) {
        $('#outer').css({'-webkit-transform': ''});
        $('#wrap').css({ width: '', height: '' });
        return;
    }
    
    scale = Math.min(width/maxWidth, height/maxHeight);
    
    $('#outer').css({'-webkit-transform': 'scale(' + scale + ')'});
    $('#wrap').css({ width: maxWidth * scale, height: maxHeight * scale });
});