JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div data-title="16x9" class="ratio ratio__16x9"></div>
<div data-title="9x16" class="ratio ratio__9x16"></div>
<div data-title="4x6" class="ratio ratio__4x6"></div>
<div data-title="3x5" class="ratio ratio__3x5"></div>

SCSS

/* 
  Ratio math
  X / Y = ratio
  16 / 9 = 56.25%;
  4 / 6 = 66.666666667%;
  ....
*/

.ratio {
  overflow: hidden;
  height: 0;
  background: #ccc;
  margin-bottom: 2rem;
  position: relative;
  
  &::after {
    content: attr(data-title);
    font-size: 2rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
  &__16x9 {
    padding-top: 56.25%;
  }
  
  &__9x16 {
    padding-top: 177.777777778%;
  }
  
  &__4x6 {
    padding-top: 66.666666667%;
  }
  
  &__3x5 {
    padding-top: 60%;
  }
}

body {
  max-width: 600px;
  padding: 1rem;
  font-family: sans-serif;
}