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％，即是我的1000px（即1000px）的100％，但是50％的宽度是200px（100px）的50％。 尽管如果未嵌套，则除非另有说明，否则它仍由默认情况下设置为整个浏览器窗口的“定义的宽度”来计算。

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

对于视口等，并将其调整为浏览器窗口的完整大小，我建议您查看James的这篇文章， 将div设为浏览器窗口的高度为100％ 。 他深入介绍了视口如何工作以及它们相对于正常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/

如果不存在包含元素，则百分比系统相对于包含元素或文档/窗口起作用。