JSFiddle - React, Tailwind, and code Playground

by vpetrychuk

HTML

<img src="http://i.imgur.com/SHo6Fub.jpg" alt="" />

CSS

body {
    margin: 0;
}
img {
    position: absolute;
    top: 0;
    bottom:0;
    left: 0;
    right:0;
    margin: auto;
}

JavaScript

var width = 300;
var height = 200;
var ratio = width / height;
var $img = $('img');
var $window = $(window);

var updateCanvas = function () {
    var maxWidth = $window.width();
    var maxHeight = $window.height();
    var winRatio = maxWidth / maxHeight;
    var newWidth = winRatio >= ratio ? maxHeight * ratio : maxWidth;
    var newHeight = winRatio >= ratio ? maxHeight : maxWidth / ratio;
    $img.css({width:newWidth, height:newHeight});
};

$window.on('resize', updateCanvas);

updateCanvas();