Сохранение соотношения сторон и центрирования независимо от соотношения сторон родителя

Question

Я нашел этот код css, который позволяет мне поддерживать соотношение сторон div.

.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; 
} 

Смотрите этот JSFiddle пример: https://jsfiddle.net/1uyo07tg/3/

Я хотел бы CSS только решение (без использования VW или VH), чтобы сохранить это соотношение сторон, даже когда родитель шире, чем соотношение сторон в вопрос (в данном случае, 16: 9).

Другими словами, я хотел бы, чтобы синие цвета div оставались в соотношении 16: 9, даже если родительский (.container) растянут шире 16: 9.

Разъяснение - я хотел бы некоторые CSS-единственное решение, чтобы иметь ребенка DIV всегда оставаться в фиксированном соотношении, по центру по вертикали и по горизонтали, независимо от того, отношение размера или аспект родительского DIV и без использования VW , В.Х.. Я уверен, что для этого нужен JS-код (который у меня есть), но я просто хотел посмотреть, есть ли у него только простой инструмент для CSS.

Итог - ищет this функциональность только в CSS, не vh или vw.

Надеюсь, что имеет смысл. Любые идеи?

Спасибо заранее, Саар

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>

это даст вам 16: 9 всегда, проверьте его также на расширенном окне

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 является даже не носят