CSS:如何强制DIV像IMG一样保持纵横比

Question

我正在为iOS设备开发一个灯箱，它应该具有以下功能：+ 适合屏幕+ 水平和垂直居中+ 保持背景图像的纵横比+ 在背景图像上方显示信息+ 我很想有一个仅限 CSS 的解决方案+ 应该在 iOS 上运行，需要 IE 支持：-）

我有一个非常优雅的解决方案，但（红色）div的行为与图像有些不同。只需玩转窗口大小，自己看看。

这会使图像居中并使其缩小。相同的代码不适用于 DIV，因为它没有像 IMG 那样固有的最大维度。

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

这是一个演示"http://jsfiddle.net/nL4M5/"

任何人都可以想出解决方案吗？

谢谢

Answer 1

睡个好觉后，我终于找到了合适的解决方案。

它使用vw和vh单位，应该适用于所有主要的浏览器，包括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/