Как задать высоту блока равным половине ширины на css?

Question

[Антон Литвиненко]

Всем привет, вопрос простой, есть такой блок



Слева это слайдер, у которого картинки вставлены с помощью background (соответственно высоты блок не имеет), справа просто блок с контентом. Собственно, вот код, высоту я задаю на jQuery

https://codepen.io/AntonLitvin/pen/GRoQzBP

Можно ли как-то задать квадратные размеры половинкам используя только флексы и не используя свежие штучки типа переменных или гридов? Для контейнера на всю ширину экрана я такое сделал через vh, vw, но если блок в контейнере, то так уже не работает

Comments

[Dima Polos]

Не вник до конца, честно. Но, отвечая на вопрос в заголовке: если задать padding-top: 50% то будет как раз половина ширины, потому что паддинги вертикальные в процентах тоже от ширины идут. Проблема в том, что тогда контент туда не вставишь, но можно в блок вложить еще блок и position: absolute; top: 0, bottom: 0, left: 0, right: 0 - растянуть контент на всю ширину и высоту.

[Антон Литвиненко]

Dima Polos, о, с паддингом это идея, чего-то я сам не подумал, при этом в последнем проекте часто это использовал для адаптивного видео и пропорций изображений с бекграундом. Дырявая башка). Спасибо

[Dima Polos]

Антон Литвиненко, ну да, пропорции видео тот же прием)

[Антон Литвиненко]

Dima Polos, для бекграунда и внутренний блок не нужен. Я чуть позже отмечу решением, гдядишь, может ещё кто идей накидает)

[Dima Polos]

Антон Литвиненко, без проблем) я думаю, что сейчас гридов накидают, js предложат)

Answer 1

[Dima Polos]

padding-top в процентах например? padding-top: 50% + вложенный блок с position: absolute, width: 100%, height: 100%