JSFiddle - React, Tailwind, and code Playground
HTML
<div>
Some content here
</div>
CSS
html, body {
height: 100%;
min-height: 100%;
background: url(http://res2.windows.microsoft.com/resbox/en/windows/main/03f3d3d9-ce56-42ee-81c6-cf88ed35943d_4.jpg);
background-size: cover;
padding: 0;
margin: 0;
}
div {
padding: 30px;
}
@media screen and (orientation:portrait) {
body {
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
JavaScript
function checkOrientation() {
var winWidth = $(window).width();
var winHeight = $(window).height();
if (winHeight > winWidth) {
$('body').width(winHeight).height(winWidth);
}
}
checkOrientation()
var resizeEnd;
$(window).resize(function(){
clearTimeout(resizeEnd);
resizeEnd = setTimeout(checkOrientation, 100);
});