JSFiddle - React, Tailwind, and code Playground

by Keith Henry

HTML

<div id=outer>
    <div id=inner>
        text
    </div>
</div>

CSS

#outer { 
    background-color: blue; 
    padding: 0;
}
#inner { 
    background-color: red;
    width: 600px;
    height: 400px;
    border: 4px dashed #0f0;
    font-size: 32px;
    color: #fff;
    -moz-transform: scale(0.35);
    -webkit-transform: scale(0.35);
    transform: scale(0.35);
}

JavaScript

function collapseScale(inner, scale)
{
    var $inner = $(inner);
 
    // Get the width and height pre-scaling, including borders
    var x = $inner.outerWidth(),
        y = $inner.outerHeight();
    
    // Get the scaled width and height
    var xs = x * scale,
        ys = y * scale;
    
    // The offset will be half the difference (either side) of the difference between the original size and the scaled size
    var xo = (xs - x)/2,
        yo = (ys - y)/2;
    
    // Set the parent to be the same size, with no overflow
    $inner.parent().css({
        width: xs,
        height: ys,
        overflow: 'hidden',
        position: 'relative'
    });
    
    // Now absolutelty position the inner with a negative offset
    $inner.css({
        position: 'absolute',
        top: '' + yo + 'px',
        left: '' + xo + 'px'
    });
}

collapseScale('#inner', 0.35);