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;
}

这是一个DEMO ' 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/