自动调整大小窗口上的DIV根据设定的纵横比调整大小

问题描述：

我想弄清楚如何创建一个具有设置纵横比（如4：3）的div并自动调整自身大小（即宽度和高度检查链接在下面）时调整窗口，而不会改变比例。在div应该表现得完全像下面的jsfiddle视频，这是我使用对象配合属性创建：自动调整大小窗口上的DIV根据设定的纵横比调整大小

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

这里的jsfiddle： Fiddle

我知道这听起来像一个很重要的问题，但到目前为止我发现的所有解决方案都只能根据窗口宽度调整固定比例的div。因此，请确保检查在jsfiddle中缩小窗口高度时发生的情况。虽然使用尽可能多的空间，div不应该泄漏出屏幕 - 既不在右边也不在底部。

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

可能的复制（HTTPS：/ /stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css） – Isma

嘿Isma，谢谢你的输入。不幸的是，这正是我谈论的这些解决方案之一：它们不考虑调整窗口高度的大小，只考虑窗口的宽度。 – Orochi1992

我不这样做真的不可能AFAIK纯粹的CSS。你不能有宽度或高度*的最大值。...... –

答

对于那些谁是具有同样的问题，我发现了一个解决方案：

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

以下为[保持与CSS一个div的纵横比]的jsfiddle

比我打算放的更好。 –