自動調整大小窗口上的DIV根據設定的縱橫比調整大小

-3

我想弄清楚如何創建一個具有設置縱橫比（如4：3）的div並自動調整自身大小（即寬度和高度檢查鏈接在下面）時調整窗口，而不會改變比例。在div應該表現得完全像下面的jsfiddle視頻，這是我使用對象配合屬性創建：自動調整大小窗口上的DIV根據設定的縱橫比調整大小

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

這裏的jsfiddle： Fiddle

我知道這聽起來像一個很重要的問題，但到目前爲止我發現的所有解決方案都只能根據窗口寬度調整固定比例的div。因此，請確保檢查在jsfiddle中縮小窗口高度時發生的情況。雖然使用盡可能多的空間，div不應該泄漏出屏幕 - 既不在右邊也不在底部。

編輯：我正在尋找一個解決方案，考慮到窗口的寬度和高度。到目前爲止發佈的鏈接僅考慮窗口的寬度。

2017-09-20 Orochi1992

可能的複製（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

2017-09-20 22:10:24 Orochi1992

比我打算放的更好。 –

回答