视口单位，如何保持宽高比？

Question

我刚刚发现了视口单位，很想使用它们。

第一个挑战：我的元素有一个“基本大小”为760x670像素。我想使用视口单位将其缩放，使高度达到100vh或宽度达到100vw，以较小者为准。

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

目前我正在使用：

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

这会调整宽度以适应屏幕，导致垂直滚动。虽然也不算太糟糕，但我更希望它实际上能适应视口。

- Niet the Dark Absol

---

我正在Chrome中进行测试。似乎vw单位无法在calc内使用。我尝试了一些类似于height: -webkit-calc(100vw/3)的东西。唯一支持calc和视口单位的其他浏览器是IE10和Safari 6，但它们都无法安装在我的平台（Windows 7）上。 - Šime Vidas

顺便提一下，这应该可以通过媒体查询实现，因为您可以根据宽高比分支代码，例如 @media all and (min-aspect-ratio: 760/670) { ... }。 - Šime Vidas

这是一个WebKit bug。所以不要考虑Chrome/Safari。Firefox/Opera甚至没有实现视口单位。看起来IE10是唯一能理解你的代码的浏览器。:) - Šime Vidas

@ŠimeVidas 你可以对这两条评论做出一个好的回答。 - Pavlo

@PavloMykhalov 我已经让它在IE10中工作了。答案如下。 :-) - Šime Vidas

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尚未实现视口单位，而WebKit浏览器目前存在一个问题，即视口单位无法在calc()内部使用。

- Šime Vidas