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

例如，如果你有这个：

<div id="outer">

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

</div>

和这个css

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

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

这是一个缩放的 fiddle：http://jsfiddle.net/q6ux91x9/

百分比系统与包含元素相关，或者 document/window 如果不存在包含元素。

Answer 2

高度不一定要计算到视口的全高，它是按定义的宽度计算的。如果你有 #wrap 嵌套在 #container 中并定义如下：

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

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

然后通过将环绕高度声明为 100%，即我的 1000px（即 1000px）的 100%，但是 50% 的宽度是 200px（100px）的 50%。尽管如果它不是嵌套的，那么它仍然由 "defined width" 计算，默认设置为整个浏览器 window，除非另有说明。

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

对于视口等，并将其调整为浏览器的完整大小 window 我建议查看 James 在 Make div 100% height of browser window 上撰写的 post。他深入探讨了视口的工作原理以及它们相对于普通 100%

的优势

CSS3 width and height ratio