CSS. Как сделать, чтоб блок занимал всё пространство родителя?

Question

[devalone]

Имеется блок с фиксированной шириной и высотой и внутри него блок с неизвестной высотой и шириной, нужно позиционировать внутренний блок так, чтобы он занял всё пространство как-то так https://jsfiddle.net/vngmyntr/ Т.е. если у внутреннего ширина больше высоты, то ставим высоту родителя, а ширину авто и наоборот. Желательно без JS.
P.S. вариант с фоном не предлагать, должен позиционироваться в том числе блок video

Answer 1

[Ivan Bogachev]

Вам нужно свойство object-fit. Правда для IE все-таки нужен полифилл.

Comments

[devalone]

Спасибо! Получилось https://jsfiddle.net/vngmyntr/3/

Answer 2

[Drovosek01]

Нужно для img в контейнере задать max-width: 100% и max-height: 100% и картинка сама растянется под размеры контейнера.

https://jsfiddle.net/cdr2k7j6/

Comments

[devalone]

Спасибо, я уже давно забыл про этот вопрос, но кому-то может помочь)

Answer 3

[Сергей Горячев]

Откройте для себя flexbox, и тогда вопросы отпадут.

Comments

[devalone]

Пробовал, только такое получается https://jsfiddle.net/vngmyntr/1/

[Сергей Горячев]

devalone: Не туда добавляешь. https://jsfiddle.net/vngmyntr/2/

[Сергей Горячев]

devalone: И stretch - это значение по умолчанию, слева и сверху. Еще раз смотрите внимательно flexbox.help, и правьте как нужно.

[devalone]

Sergey Goryachev: нет, ты меня неправильно понял, мне нужно позиционировать именно картинки внутри блока, т.е. яндекс должен получить height: 100% от родителя, а телефон width: 100%