按比例缩放div的宽度，高度为100％

Question

我正在制作一个带有窗口调整大小的div刻度，我需要将高度保持在100％但宽度比例（4：3）。我看到了这个优秀的post，这是一个很好的例子，可以调整高度与宽度，但不是相反，我也找不到任何讨论它的帖子。

按照这些说明，我有一个inner div，可以根据outer div的css在高度上正确缩放：

#outer {
  position: relative;
  width: 100%;
  padding-bottom: 50%;
  background-color: gray;
  margin-left: auto;
  margin-right: auto;
}

#inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: green;
}

是否有一种简单的方法可以切换它以使高度保持在100％并且宽度按比例缩放？我已经尝试调整'宽度'，'高度'和'填充'值，但似乎无法得到它。谢谢！

编辑：我添加了jsfiddle，其按宽度按比例缩放。您将看到带有窗口大小的绿色框​​缩放，并且高度按比例缩放。我希望让绿色的盒子与窗口一起缩放它的高度，然后按比例缩放它的宽度。