JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<div id="contener">
    <div id="hey">heyhey</div>
</div>

CSS

body { background:yellow; }

#contener { text-align:center; background:white;
            height:80%; width:80%; top:10%; left:10%; position:absolute;
}

.wrap { background:pink; display:inline-block; position:relative; margin:0; padding:0;
        width:100%; max-width:400px; min-width:100px; overflow:visible;
      }

.wrap > *:nth-child(1) { width:100%; }
.wrap > *:nth-child(n+2) { position:absolute; top:0; left:0; width:100%; height:100%; background:red; }

#hey { /*font-size: 10vh;*/ background:pink; }

JavaScript

var ratio = 1.5;
var s = getISize(ratio);
var img = getImg(s.w,s.h);

var $body = $("body");
var $contener = $("#contener");
var $wrap = $('<div class="wrap" />');
var $img = $('<img class="sizer" />').attr({src:img});

$body.append("ratio "+ratio+", width "+s.w+"px, height "+s.h+"px");
$contener.prepend($img);
$contener.wrapInner($wrap);

function getISize(ratio,limit,maxdiff){
    var ok=0, x=1, y=1;
    limit = (limit === undefined)?100:limit;
    maxdiff = (maxdiff === undefined)?0:limit;
    if(ratio > 0) // landscape
    {   while(!ok && y <= limit)
        {    x = y*ratio;
             if(x - parseInt(x,10) <= maxdiff) ok=1; else y++;
        }
     
        if(!ok)
        {    y=limit;
             x=Math.round(y*ratio);
        }
    } else { // vertical
        while(!ok && x < limit)
        {    y = x*ratio;
             if(y - parseInt(y,10) <= maxdiff) ok=1; else x++;
        }
     
        if(!ok)
        {    x=limit;
             y=Math.round(x*ratio);
        }
    }
    
    return {w:x,h:y};
}

function getImg(w,h){
    if(h === undefined){
        var s = getISize(w);
        w = s.w; h = s.h;
    }
    
    var c = document.createElement('canvas');
    c.width = w; c.height = h;
    return c.toDataURL('image/png');
}