JSFiddle - React, Tailwind, and code Playground

by Nic Fontaine

HTML

<div class="outer">
  <img class="top" src="https://cdn.shopify.com/s/files/1/2168/6841/products/[email protected]?v=1506555135">
  <div class="bot">a
  </div>
</div>

CSS

*
{
    margin:0;padding:0;
}

.outer
{
    width: 100vw; 
    height: 56.25vw; /* 100/56.25 = 1.778 */
    background: pink;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.top {
  background: teal;
  flex: 4 1 0;
}

.bot {
  background: aqua;
  flex: 1 0 0;
}