<main>
  <div class="aspectratio" style="--aspect-ratio: 16/9;">
    <div>
      <p>16:9</p>
    </div>
  </div>
</main>

.aspectratio {
  position: relative;
  height: 0;
  width: 100%;
  padding-top: calc(100% / (var(--aspect-ratio)));
  
  /* visual helper */
  outline: 2px solid blue;
  background: hotpink;
}

.aspectratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* center my children */
  display: flex;
  align-items: center;
  justify-content: center;
}


/* other styles, not directly required for the demo */
@keyframes change {
  0% { width: 50vw; }
  100% { width: 80vw; }
}

main {
  width: 50vw;
  margin: 0 auto;
  animation: change 5s linear alternate infinite;
}