JSFiddle - React, Tailwind, and code Playground

by Jonah

HTML

<div id = "aspectdiv">

</div>

CSS

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

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

#aspectdiv
{
	width: 100%;
	height: 100%;
	background-image: url('https://preview.ibb.co/cciSZv/beautiful_hd_wallpaper_2015_111526537_269.jpg');
	background-size: cover;
}

JavaScript

$(document).ready(function()
{
	var fullhdWidth = 1920;
	var fullhdHeight = 1080;
	var fullhdRatio = fullhdWidth / fullhdHeight; // About 1.7
	
	$(window).on('resize', function()
	{
		var windowWidth = $(this).width();
		var windowHeight = $(this).height();
		var windowRatio = windowWidth / windowHeight;

		console.log(windowWidth, windowHeight, windowRatio);
		
		var imageWidth = null;
		var imageHeight = null;
		
		
		
		/*if(windowWidth > windowHeight) // Width > Height
		{
			if(windowRatio > fullhdRatio)
			{
				imageWidth = windowWidth;
				imageHeight = imageWidth / fullhdRatio;
			}
			else
			{
				imageHeight = windowHeight;
				imageWidth = imageHeight * fullhdRatio;
			}
		}
		else if(windowHeight > windowWidth) // Height > Width
		{
			if(windowRatio > fullhdRatio)
			{
				imageWidth = windowWidth;
				imageHeight = imageWidth / fullhdRatio;
			}
			else
			{
				imageHeight = windowHeight;
				imageWidth = imageHeight * fullhdRatio;
			}
		}
		else // Width / Height = 1.7
		{
			imageWidth = windowWidth;
			imageHeight = windowHeight;
		}*/
		
		console.log(imageWidth, imageHeight)
		
	});
})