CSS3宽高比

Question

因此，我对此感到困惑，然后意识到我实际上不知道我应该在Google中输入什么作为查询，这样我就可以得到答案：

如果我想使用百分比在CSS3中定义高度和宽度，例如：

#wrap{
  width: 100%;
  height: 250%;
}

高度是根据视图端口的全部高度计算的，还是根据定义的宽度计算的(似乎--设置的宽度成为所有视图端口的基值)？例如：

width = 1000px
height = 1200px

则是：

width = 100% <=> width = 1000px
height = 250% <=> height = 2.5 * 1200px = 3000px

或者是：

width = 100% <=> width = 1000px
height = 250% <=> height = 2.5 * width = 2.5 * 1000px = 2500px

此外，同样的规则，无论是什么，也适用于所有其他元素吗？我是根据父级的高度计算高度，还是根据父级的宽度计算宽度，或者宽度是否成为所有相关的100%？

Answer 1

高度不一定计算到视图端口的全部高度，而是由定义的witdth计算。如果#wrap嵌套在#container中，并将其定义为：

#container{
height: 1000px;
width: 200px;
}

#wrap{
height:100%;
width: 50%;
}

然后声明包装高度为100%，这是我的1000 50(即1000 50)的100%，但是50%的宽度是200 50(100 50)的50%。虽然如果它不是嵌套的，那么它仍然是由“已定义的宽度”计算的，默认情况下，它被设置为整个浏览器窗口，除非另有规定。

是的，相同的规则适用于所有其他元素，并计算为父元素的高度和宽度。

对于视图之类的内容，并将其大小调整到浏览器窗口的完整大小，我建议您看一下JamesonMake div 100% height of browser window的这篇文章。他深入探讨了视点是如何工作的，以及它们相对于正常的100%的优势。

Answer 2

例如，如果您有以下内容：

<div id="outer">

<div id="inner"></div>

</div>

而这个css

#outer {
width: 1000px;
height: 1000px;
}

#inner {
width: 50%;  /* is 500 */
height: 200%; /* is 2000 */
}

这里有一个缩放的小提琴：http://jsfiddle.net/q6ux91x9/

如果不存在包含元素，则百分比系统与包含元素或文档/窗口相关。