Automatische Größenanpassung eines DIV bei Fenstergrößenanpassung basierend auf einem festgelegten Seitenverhältnis

Question

Ich versuche herauszufinden, wie man ein div erzeugt, das ein festgelegtes Seitenverhältnis (zB 4: 3) hat und automatisch die Größe selbst ändert (dh Breite und Breite) (siehe Link unten), wenn Sie die Größe des Fensters ändern, ohne das Verhältnis zu ändern. Die div sollte genau wie das Video in der folgenden jsfiddle verhalten, die ich mit der Objekt-Fit-Eigenschaft erstellt:

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

hier die jsfiddle: Fiddle

Ich weiß, es wie ein triviales Problem klingen mag, aber alle Lösungen, die ich bisher gefunden habe, waren nur in der Lage, ein divide mit festem Verhältnis basierend auf der Fensterbreite zu skalieren. Bitte überprüfen Sie daher, was passiert, wenn Sie die Höhe des Fensters in der Datei minimieren. Bei möglichst viel Speicherplatz sollte das div niemals aus dem Bildschirm austreten - weder rechts noch unten.

EDIT: Ich bin auf der Suche nach einer Lösung, die die Breite UND Höhe des Fensters berücksichtigt. Die bisher veröffentlichten Links berücksichtigen nur die Fensterbreite.

Answer 1

Für diejenigen, die das gleiche Problem haben, werden, fand ich eine Lösung:

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

Hier ist die jsfiddle