JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<div>  <img src="https://placekitten.com/244/494" alt="" /></div>

CSS

*
{
    margin:0;padding:0;
}

div
{
    width: 100vw; 
    height: 202.4vw; /* 100/56.25 = 1.778 */
    background: pink;
    max-height: 80%;
    max-width: 49.39vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

div > img {
/*   max-width: 100%; */
  margin: auto;
  height: 100%;
}