视单元，保持纵横比？(Viewport units, keeping aspect ratio?)

所以，我刚刚发现视台，我真的想使用它们。

第一个挑战：我的元素具有760x670像素的“基地规模”。 我想用视窗单位将其放大，以使这些高度100vh ，或宽度为100vw ，取其较小者。

Unfortnately，虽然我可以用100vmin得到两个较小的，我只能把它应用到的宽度和高度，而不是两个。

目前我使用：

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

这个缩放宽度以适应屏幕，从而导致垂直滚动。 这是不是太糟糕，但我更喜欢它，如果我能实际上有它适合视口。

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仅在本演示将工作的浏览器。 火狐/歌剧没有实现视口单位还和WebKit浏览器目前有哪里视单位不能内部使用的一个错误calc()

文章来源: Viewport units, keeping aspect ratio?