Maintain aspect ratio of div but fill screen width and height in CSS

Resize vertically and horizontally and you'll see that the element will always fill the maximum viewport size without breaking the ratio and without scrollbars

by Jon Fuller

HTML

<div></div>

CSS

*
{
    margin: 0;
	padding: 0;
}

div
{
    width: 100vw !important;
    height: 56.25vw !important; /* 100/56.25 = 1.778 */
    background: pink !important;
    max-height: 100vh !important;
    max-width: 177.78vh !important; /* 16/9 = 1.778 */
    margin: auto !important;
    position: absolute !important;
    top: 0 !important;
	bottom: 0 !important; /* vertical center */
    left: 0 !important;
	right: 0 !important; /* horizontal center */
}