Как сверстать центрированный резиновый пропорциональный блок?

Question

[Igor Fedorov]

Добрый день.
Возникла такая проблема. Необходимо создать следующую структуру:

Блок с чёрной рамкой - фиксированный блок во всю доступную ширину и высоту
Оранжевый блок - внутренний блок, должен быть отцентрирован в родительском, иметь некую максимальную ширину и высоту, но при этом его высота должна быть как в пропорции 9:16 (16:9 в портретном режиме).

1) Блок с рамкой значительно больше оранжевого, он просто "парит" в центре.
2) Ширина родителя меньше потомка, он ужимается по ширине пропорционально с высотой
3) См. пункт 2, только для высоты блока
4) Родитель принял размеры потомка, он просто заполнил всё пространство.

Answer 1

[Алексей]

flex

Answer 2

[cssfish]

с шириной проблем нет (width+ max-width), а с высотой - проблема, т.к. блок с фикс соотношением сторон (который через padding) всегда отталкивается от ширины, а менять ширину от высоты не может. так что js нужен, но только для этой части задачи. остальное вполне может само. например
https://jsfiddle.net/87yen2k2/

Answer 3

[Андрей Кварцов]

Вот так можно отцентрировать, блок, а пропорциональное уменьшение блока можно найти здесь же на тостере

Comments

[Igor Fedorov]

Про центрирование с помощью flex я знаю, но вот пока это никак не уживается с пропорциональностью.

[Андрей Кварцов]

Igor Fedorov, сделайте ширину оранжевого в процентах и от ширины блока считайте высоту в пропорции на js

[Igor Fedorov]

kolesov_prod, да, мне уже самому кажется, что без JS такого не сделать. Спасибо за ответ.