css - 视口(viewport)单位，保持纵横比？

Question

所以我刚刚发现了视口(viewport)单位，我真的很想使用它们。

第一个挑战:我的元素的“基本尺寸”为 760x670 像素。我想使用视口(viewport)单位将其放大，以便高度为 100vh，或宽度为 100vw，以较小者为准。

不幸的是，虽然我可以使用 100vmin 来获得两者中较小的一个，但我只能将它应用于宽度或高度，而不能同时应用于两者。

目前我正在使用:

#root {
    width: 760px;
    height: 670px;
    width: 100vw;
    height: calc(670vw/760);
}

这会缩放宽度以适合屏幕，从而导致垂直滚动。这还不错，但如果我真的能让它适合视口(viewport)，我会更喜欢它。

Answer 1

我已经让它在 IE10 中工作了:

#elem {
    width: 100vw;
    height: calc((9/16)*100vw);
}

@media (min-aspect-ratio:16/9) {
    #elem {
        height: 100vh;
        width: calc((16/9)*100vh);
    }
}

现场演示: http://jsfiddle.net/C2ZGR/show/ (在IE10中打开(预览版可用于Windows 7)；然后调整窗口大小，使宽度或高度非常小)

我使用了一个宽高比为 16:9 的元素，但代码适用于任何宽高比 - 只需替换 16/9 和 9/16 与你想要的纵横比。

顺便说一句，IE10 是唯一可以运行此演示的浏览器。 Firefox/Opera 尚未实现视口(viewport)单位，WebKit 浏览器目前存在一个错误，即无法在 calc() 中使用视口(viewport)单位。