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/