CSS | Type: CSSProportional scaling of a container

There is more detail at the reference link for complex containers.

.parent {
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
}

.child {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

Reference Links

https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/