JSFiddle - React, Tailwind, and code Playground

by dgommeren

HTML

<div id="layout">
    <p>
    the first line of text
    </p><p>
    And another line
    </p>
    
</div>

CSS

html {
    display:flex;
    justify-content:center;
    align-items:center;
  height:100%;
  width:100%;
    margin: 0;
}
body {
    margin: 0;
    width:90%;
    height:90%;
}
#layout {
  width:200px;
  height:200px;
    background: blue;
    color: white;
}

JavaScript

var $win = $('body');
var $lay = $('#layout');
var baseSize = {
    w: 200,
    h: 200    
}

function updateScale() {
    var ww = $win.width();
    var wh = $win.height();
    var newScale = 1;

		console.log(ww+'/'+wh);
    
    
    // compare ratios
    if(ww/wh < baseSize.w/baseSize.h) { // tall ratio
        newScale = ww / baseSize.w;
    } else { // wide ratio
        newScale = wh / baseSize.h;        
    }
    
    $lay.css('transform', 'scale(' + newScale + ',' +  newScale + ')');
/*  		$lay.width(baseSize.w*newScale);
 		    $lay.height(baseSize.h*newScale);    
 		 */
     console.log(newScale);
}

updateScale();
$(window).resize(updateScale);