JSFiddle - React, Tailwind, and code Playground

HTML

<div id="out">
    <div id="in">
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
    </div>
</div>

CSS

#out{
 background-color: #f00;
    width:300px;
    height: 200px;
    overflow: hidden;
    position: absolute;
}
#in{
 background-color: #ff0;
    position: absolute;
    width:200px;
    height: 100px;
}

JavaScript

var divo=document.getElementById("out");
var divi=document.getElementById("in");
var box_w=300;
var box_h=200;
var w=50;
var h=50;

var fx=box_w/w;
var fy=box_h/h;
var f=fy;
if(fx>f) f=fx; // select the biggest factor to cover.

var new_w=w*f;
var new_h=h*f;
var ox=(box_w-new_w)/2;
var oy=(box_h-new_h)/2;

divi.style.width=new_w+"px";
divi.style.height=new_h+"px";
divi.style.left=ox+"px";
divi.style.top=oy+"px";
//window.alert(new_w+","+new_h+" => "+ox+" "+oy);