缩放方形div以适合父div，同时保持纵横比

Question

所以这让我疯狂，我想知道是否有办法用纯CSS做到这一点。我想要做的是有一个固定高度的父div（紫色）。在紫色div里面，我希望橙色div保持纵横比，并扩展到父div的高度。如果我改变父div的大小，橙色div应相应地按其宽高比进行缩放。

注意：尝试在没有图像或百分比父级高度的情况下执行此操作。

参见示例：

Answer 1

你可以用一些简单的JS来做。只需获取子（或父）的高度并设置宽度。您可以根据需要使用计算来获得所需的比率。

var width = document.getElementById('child').offsetHeight;
document.getElementById('child').style.width = width + 'px';

#parent{
  width: 100%;
  height: 100px;
  background-color: purple;
}
#child{
  height: 100%;
  background-color: yellow;
}

<div id="parent">
  <div id="child"></div>
</div>