JSFiddle - React, Tailwind, and code Playground

by Jonah

HTML

<script src="https://cdn.rawgit.com/sdecima/javascript-detect-element-resize/master/jquery.resize.js"></script>
<div id = "wrapper">
	<div id = "aspectdiv">

	</div>
</div>

<div id = "aspectvisualizer">

</div>

<div id = "containersize">

</div>

<div id = "aspectsize">

</div>

<div id = "overflowX">

</div>

<div id = "overflowY">

</div>

CSS

*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body
{
	width: 100%;
	height: 100%;
}

body
{
	padding: 25px;
}

#wrapper
{
	width: 200px;
	height: 200px;
	border: 1px solid red;
	resize: both;
	overflow: hidden;
	z-index: 20;
}

#aspectvisualizer
{
	position: absolute;
	left: 0;
	top: 0;
	width: 0px;
	height: 0px;
	
	border: 1px solid limegreen;
	
	z-index: 10;
}

#aspectdiv
{
	width: 100%;
	height: 100%;
	background-image: url('https://www.fillmurray.com/1920/1080');
	background-size: cover;
}

#containersize
{
	position: absolute;
	color: red;
}

#aspectsize
{
	position: absolute;
	color: limegreen;
}

#overflowX, #overflowY
{
	position: absolute;
	color: blue;
}

JavaScript

$(document).ready(function()
{
	var fullhdWidth = 1920;
	var fullhdHeight = 1080;
	var fullhdRatio = fullhdWidth / fullhdHeight; // About 1.7
	
	$('#wrapper').resize(function()
	{
		var containerWidth = $(this).width();
		var containerHeight = $(this).height();
		var containerRatio = containerWidth / containerHeight;
		var realWidth = null;
		var realHeight = null;
		var overflowX = null;
		var overflowY = null;
		
		console.log(containerWidth, containerHeight, containerRatio);

   		if(containerRatio > fullhdRatio)
    	{
			realWidth = containerWidth;
			realHeight = containerWidth/fullhdRatio;
			overflowX = 0;
			overflowY = (containerWidth/fullhdRatio) - containerHeight;
    	}
    	else
    	{
			realWidth = containerHeight*fullhdRatio;
			realHeight = containerHeight;
			overflowX = containerHeight*fullhdRatio - containerWidth;
			overflowY = 0;
    	}	
		
		$('#aspectvisualizer').css(
		{
			top: '25px',
			left: '25px',
			width: realWidth + 'px',
			height: realHeight + 'px'
		});
		
		$('#containersize').text(Math.round(containerWidth) + 'x' + Math.round(containerHeight));
		$('#aspectsize').text(Math.round(realWidth) + 'x' + Math.round(realHeight));
		$('#overflowX').text('X: ' + Math.round(overflowX));
		$('#overflowY').text('Y: ' + Math.round(overflowY));
		
		$('#containersize').css(
		{
			top: 15 + containerHeight + 15 + 'px',
			left: 15 + containerWidth / 2 + 'px'
		});
		
		$('#aspectsize').css(
		{
			top: 15 + realHeight + 15 + 'px',
			left: 15 + realWidth / 2 + 'px'
		});
		
		$('#overflowX').css(
		{
			top: 15 + realHeight + 15 + 'px',
			left: realWidth + 'px'
		});
		
		$('#overflowY').css(
		{
			top: realHeight + 'px',
			left: 15 + realWidth + 15 + 'px'
		});
		
		console.log('image real width', realWidth);    
		console.log('image real height', realHeight);
	});
});