根据设置的纵横比在窗口调整大小时自动调整 DIV 的大小

Question

我试图弄清楚如何创建一个具有设定纵横比（例如 4:3）并在调整窗口大小时自动调整自身大小（即下面的宽度和高度检查链接）的 div，而无需更改比率。 div 的行为应该与以下 jsfiddle 中的视频完全相同，我使用 object-fit 属性创建：

.wrapper video {
      object-fit: contain;
      width:100%;
      height:100%;
    }

这里是 jsfiddle： Fiddle

我意识到这听起来像是一个微不足道的问题，但到目前为止我发现的所有解决方案都只能根据窗口的宽度调整固定比例 div 的大小。因此，请务必检查在 jsfiddle 中缩小窗口高度时会发生什么。在使用尽可能多的空间的同时，该 div 绝不应该从屏幕上漏出 - 既不在右侧，也不在底部。

编辑：我正在寻找一种考虑到窗口宽度和高度的解决方案。到目前为止发布的链接仅考虑了窗口的宽度。

Answer 1

对于那些有同样问题的人，我找到了解决方案：

.greedy {
  border: 3px solid red;
  width: 100vw;
  height: 80vw;
  padding: 10%;
}

这里是jsfiddle