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/






