根据设置的宽高比

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