我们在CSS / 3中有什么可以根据宽度动态设置高度吗？

Question

例如我们有一个div，我们希望始终保持形状比（宽高比），CSS / 3是否具有我不知道的这种功能？

容器宽100px。

示例：
宽度：100％;
高度：100％宽度;
结果： div大小为100px宽，100px高。

示例2：
宽度：80％
高度：60％宽度;
结果： div大小为80px宽，48px高。

我们有类似的东西吗？
Css已经有自动，大众和类似的东西，有很多黑客但没有像样的解决方案，或者我根本不知道它们，任何一个？我们在2016年仍然没有办法克服填充的绝对黑客。我可以用JS简单地解决这个问题，但这是不同的故事。

修改

• padding-bottom不是解决方案，它的解决方法迫使你将内部元素置于绝对位置。
• vw基于屏幕，不合适。

Answer 1

您实际上可以使用calc并在其上使用相同的基值。

div {
  background-color: red;
  width: 100vw;
  height: calc(100vw * 0.5);
}

<div></div>