DIV-Seitenverhältnis beibehalten und zentriert, unabhängig vom Seitenverhältnis des Elternteils

Question

Ich habe diesen CSS-Code gefunden, mit dem ich das Seitenverhältnis eines Divs beibehalten kann.

.container { 
    width: 100%; 
    height: 100%; 
    background-color: red; 
    position: absolute; 
} 


.wrapper { 
    width: 100%; 
    /* whatever width you want */ 
    display: inline-block; 
    position: relative; 
    top: 50%; 
    transform: translate(0%, -50%); 
} 
.wrapper:after { 
    padding-top: 56.25%; 
    /* 16:9 ratio */ 
    display: block; 
    content: ''; 
} 
.main { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
/* fill parent */ 
    background-color: deepskyblue; 
    /* let's see it! */ 
    color: white; 
} 

dieses JSFiddle Beispiel Siehe: https://jsfiddle.net/1uyo07tg/3/

ich eine CSS-only-Lösung (ohne die Verwendung von VW oder VH) möchte auch dieses Seitenverhältnis zu halten, wenn die Eltern breiter als das Verhältnis Aspekt sind in Frage (in diesem Fall, 16: 9).

Mit anderen Worten, ich möchte, dass das blau gefärbte Div im Verhältnis 16: 9 bleibt, auch wenn das Elternteil (.container) breiter als 16: 9 ist.

Klärende - ich würde einig CSS-only Lösung mag, ein Kind haben div bleiben immer in einem festen Verhältnis, zentrierte vertikal und horizontal, unabhängig von der Größe oder das Seitenverhältnis der Mutter div und ohne vw mit , v. Ich bin mir ziemlich sicher, dass dies JS-Code benötigt (was ich habe), aber ich wollte nur sehen, ob jemand einen CSS-reinen Trick dafür hat.

Bottom line - auf der Suche nach this Funktionalität nur in CSS, nicht vh oder vw.

Hoffnung, die Sinn macht. Irgendwelche Ideen?

Vielen Dank im Voraus, Sa'ar

Answer 1

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    } 
 

 
.container{ 
 
    width:100%; 
 
    height:100%; 
 
    background-color:red; 
 
    padding-top:18%; 
 
    padding-bottom:18%; 
 
} 
 

 
.wrapper{ 
 
    width:100%; 
 
    background-color: deepskyblue; 
 
    height:100%; 
 
    
 
}

<div class="container" > 
 
    <div class="wrapper"> 
 
     <div class="main"/> 
 
    </div> 
 
</div>

das Sie 16 geben: 9-Verhältnis immer, überprüfen Sie es auch auf erweiterte Fenster

Answer 2

body,html { 
    margin: 0; 
    height: 100%; 
    width: 100%; 
} 
.container { 
    width: 100%; 
    height: 100%; 
    background-color: red; 
    overflow: hidden; 
}  
.wrapper { 
    width: 100%; 
    max-width: calc(100vh/0.5625); 
    padding-top: 56.25%; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background-color: deepskyblue; 
} 

.main ist sogar nicht nessarisch