JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <img id="img" src="http://x3.cdn03.imgwykop.pl/c3201142/comment_F4x4ftxkYy1WgboSDMFlA4jt9qqMCrIP.jpg">
</body>

CSS

body, html
{
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    background: #f00;
}
			
img {
    margin: 0;
    border: 0;
    display: block;
				
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

JavaScript

var img = $('#img');
var imgAspectRatio = img.width()/img.height();
			
function setImgSize(img, aspectRatio) {

	var windowHeight = $(window).height();
	var windowWidth  = $(window).width();
				
				
	if (windowWidth/windowHeight >= aspectRatio)
	{
		img.height(windowHeight);
		img.width(windowHeight * aspectRatio);
	}
	else
	{
		img.width(windowWidth);
		img.height(windowWidth / aspectRatio);
	}

}
			
$(window).on('load resize', function(){
	setImgSize(img, imgAspectRatio);
});
			
$('body').on('click', function(){
	alert("Image width: "+ img.width() + "\nImage height: " + img.height() + "\nImage aspect ratio: " + img.width()/img.height() + "\n\nWindow width: " + $(window).width() + "\nWindow height: " + $(window).height() + "\nWindow aspect ratio: " + $(window).width()/$(window).height());
});