Остановить масштабирование video при достижение max одной из стороны

div {
    background: red;
    width: 100%;
    max-height: 80%;
}
video {
    display: block;
    width: 100%;
    height: 100%;
}
<div>
    <video poster="https://s1.1zoom.ru/big0/846/Dogs_Glance_Tongue_Australian_Shepherd_530653_1280x853.jpg"></video>
</div>

В данном примере вроде бы нет ошибки. Но вот тот же самый код на скрине введите сюда описание изображения

Тег video, по высоте выходит за границу родителя. Высота которого 80% от высоты окна браузера.

Задача в том, если блок video достигает высоту родителя(80%). Остановить увеличение по обоим из сторон.

Сколько вариантов не перепробовал выполнить так, не выходит.

То есть блок DIV(ширина которого 100%), он должен увеличиваться по высоте дочернего блока video.

Блок video, может имет разную высоту и ширину. Главное чтобы он принимал максимальную ширину, покак по высоте не достигнет родителя в 80%.

Как то так...


Ответы (0 шт):