JSFiddle - React, Tailwind, and code Playground

by jamesinealing

HTML

<div id="img"></div>
<div id="dims"></div>

CSS

img {border:1px solid red}

JavaScript

var rotation=Math.floor(Math.random() * 360);
var angle=rotation;
var angle=rotation % 90;
var imgWidth=300;
var imgHeight=224;

if ((rotation <= 90) || ((rotation >= 180) && (rotation <= 270))) { 
  w = Math.sin(angle * Math.PI/180) * imgHeight + Math.cos(angle * Math.PI/180) * imgWidth;
  h = Math.sin(angle * Math.PI/180) * imgWidth + Math.cos(angle * Math.PI/180) * imgHeight;
  alert ((rotation-90) % 180);
} else {
  h = Math.sin(angle * Math.PI/180) * imgHeight + Math.cos(angle * Math.PI/180) * imgWidth;
  w = Math.sin(angle * Math.PI/180) * imgWidth + Math.cos(angle * Math.PI/180) * imgHeight;
    alert ((rotation-90) % 180);
}

  var srcImage = 'http://media.iwm.org.uk/loris/293/133/mid_000000.jpg/full/full/'+rotation+'/default.png';

document.getElementById("img").innerHTML = '<img src="'+srcImage+'">';
document.getElementById("dims").innerHTML = 'Angle: '+angle+'<br>Width: '+w+'<br>Height: '+h;