#0 CSS Tricks, Forcing Aspect Ratio To Normal Div | #26 CSS

height: 0; position: relative; padding-top: 56.25%; This will force the aspect ratio of 16:9. Padding-top percentage responds to the container width, so this will force a specific height. You get 0.5625 when you divide 9 by 16. Then you just have to have a child container with position: absolute; top: 0; left: 0; height: 100%; width: 100%; This child div will span the entire size of the parent, sit properly, and be constrained inside of it nicely. This can be used to create a perfect container for a YouTube video, or a div with a background-image that you want proportioned correctly.