JSFiddle - React, Tailwind, and code Playground

HTML

<div class="necessary-width">
  <div class="fixed-ratio-parent">
    <div class="fixed-ratio-child">
      <div class="fixed-ratio-content">
        <h1>16:9 adaptive ratio</h1>
        <h2>Something content! Yep!</h2>
      </div>
    </div>
  </div>
</div>

CSS

.necessary-width {
  width: calc(100vw - (100vw - (100vh * (16 / 9))));
  max-width: 100%;
}

.fixed-ratio-parent {
  background: #495f69;
  position: relative;
  height: 0;
  width: 100%;
  padding-top: 56.75%; // Necessary height percentage of width
}

.fixed-ratio-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.fixed-ratio-content {
  text-align: center;
  color: #fff;
}