CSS: How to force DIV to maintain aspect ratio the same way IMG does

Tags: css

Problem :

I am working on a lightbox for ios devices that should have these features: + fit into the screen + center both horizontally and vertically + maintain an aspect ratio of the background image + display information above the background image + I would love to have a CSS only solution + Should work on iOS, ne IE support necessary :-)

I have a pretty elegant solution, but the (red) div behaves somewhat differently than the image. Just play with the window size and see for yourself.

This centers the image and make it scale down. The same code doesn't work for the DIV because it has no inherent maximum dimensions like IMG.

.lb-bg {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    max-height: 100%;
    max-width: 100%;
    margin: auto;
}

Here is a DEMO 'http://jsfiddle.net/nL4M5/'

Can anyone come up with a solution?

Thank you

---

Solution :

After a good nights sleep I finally found a suitable solution.

It uses vw and vh units, which should work in all major browesers including ie9+.

.lb { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
    width: 95vw;
    height: 98.99vw;
    max-width: 91.17vh;
    max-height: 95vh;
}

http://jsfiddle.net/YnwD5/