I've made it work in IE10:
#elem {
width: 100vw;
height: calc((9/16)*100vw);
}
@media (min-aspect-ratio:16/9) {
#elem {
height: 100vh;
width: calc((16/9)*100vh);
}
}
Live demo: http://jsfiddle.net/C2ZGR/show/ (open in IE10 (preview version available for Windows 7); then re-size window, so that either the width, or height is very small)
I've used an element with the aspect ratio of 16:9, but the code can work for any aspect-ratio - just replace 16/9
, and 9/16
with your desired aspect ratio.
Btw, IE10 is the only browser in which this demo will work. Firefox/Opera don't implement viewport units yet, and the WebKit browsers currently have a bug where viewport units cannot be used inside calc()
.