I have used a hack for this for years. And it seems to be very unknown. If you want an element to have the aspect ratio 16:9 give it a parent div with width: 1

I have used a hack for this for years. And it seems to be very unknown. If you want an element to have the aspect ratio 16:9 give it a parent div with width: 100%; height: 0; padding-bottom: 56.25%; position: relative; then just absolutely position the child element with width 100%; height:100%; This works everywhere, even in IE8. I am happy I will not have to resort to this anymore in the future, but it will do for now.