Сохранение соотношения сторон div и центрирование независимо от соотношения сторон родительского элемента. ⇐ CSS

[Anonymous]

Я нашел этот 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.

Уточнение - мне бы хотелось, чтобы дочерний элемент div всегда оставался в фиксированном соотношении, центрирован по вертикали и горизонтали, независимо от размера или соотношения сторон родительского элемента div, и без использования vw, вх. Я почти уверен, что для этого нужен код JS (который у меня есть), но просто хотел посмотреть, есть ли у кого-нибудь изящный трюк, использующий только CSS.

Внизу line – эту функциональность ищу только в CSS, без vh или vw.

Надеюсь, это имеет смысл.
Есть идеи?

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

Подробнее здесь: https://stackoverflow.com/questions/407 ... pect-ratio