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/


    CSS Howto..

    How to use Aural CSS?

    How to resize the clockpicker?

    How to Get CSS/JavaScript Pop-Up to Transition In

    how do I override user agent — using buttons from angularjs

    How to refer to css file in codeigniter?

    How to change the Img tag src through css only? [closed]

    css - how to get floated divs to stack when you zoom in

    How do I scale an SVG background-image without honoring aspect ratio in Firefox?

    How do I focus image from the center (CSS focus)?

    How to add border between td's in which are in different tr's?

    How can I get the font size of an element as it was set by css

    How to put inline circles made in CSS under each other when screen scales?

    Django-Bower + Foundation 5 + SASS, How to configure?

    how to define minimum height for tbody in css

    How to add padding and border that doesn't change width if using 960 grid system

    How do I use CSS transitions to fixed position a scaled element?

    CSS how to round of percent values to whole number pixel

    How to apply padding to a column using and CSS in Firefox?

    Dropdown menu. make it show onclick and not onmouseover

    How do I show a handle to indicate to the user that a panel is resizable?

    How to get a asp:Panel's CSS Class in code-behind after it has changed by CSS

    How to change the color of item selection radcombobox with a css style?

    How to use “two-toned” font variants in CSS?

    How to snap divs together vertically in CSS like Pinterest have

    How to specify different Css for different Mobiles (BB, Iphone, Nexus… )

    How to show a background image over foreground image using CSS

    How to show a pointer on specific table with css and Twitter Bootstrap?

    How can I set different background images for different li with same class

    How can I make images stack on top of each other as web page scales down?

    How work with degree or start and stop in linear-gradient CSS3