1

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

Tom
  • 556
  • 1
  • 7
  • 16
  • This [link1](http://snook.ca/archives/html_and_css/vm-vh-units) and [link2](http://css-tricks.com/viewport-sized-typography/) will definitely help you.. not sure whether is supports IE though. – Mr_Green Mar 05 '14 at 07:15
  • @Tom Which version of IE you mean? – Hashem Qolami Mar 05 '14 at 07:58
  • Does this help? http://stackoverflow.com/questions/6148012/setting-element-width-based-on-height-via-css – Sinister Beard Mar 05 '14 at 08:16
  • I missed your comment Mr_Green, but yes, that's it. And the support should be IE 9+ according to the article – Tom Mar 05 '14 at 09:36

1 Answers1

0

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/

Tom
  • 556
  • 1
  • 7
  • 16