Вопрос или проблема
<style>
.gl {
ширина: 50%;
}
.pl {
ширина: 100%;
максимальная-высота: 50vh;
фон: красный;
}
video {
отображение: блок;
высота: 100%;
Margin: 0 авто;
}
</style>
<div class="gl">
<div class="pl">
<video src="https://superuser.com/1111.mp4"></video>
</div>
</div>
Соотношение сторон видео может варьироваться. Высокое, узкое, широкое и высокое и т.д…
В моем примере проблема в том, что видео игнорирует максимальный предел ширины max-height: 50vh;
Логически, видео выровнено по горизонтали, но его высота выходит за пределы красного холста.
В этом случае, как я могу заставить видео соответствовать максимальной высоте родительского элемента?
Ответ или решение
Для решения проблемы, когда видео не принимает высоту своего родителя, необходимо внести небольшие изменения в CSS, чтобы обеспечить, что видео адаптируется в соответствии с максимальной высотой, установленной для своего контейнера. В данной ситуации, когда у нас есть ограничение на высоту в 50vh для класса .pl, видео должно быть настроено так, чтобы вписываться в этот контейнер.
Вот шаги, которые помогут сделать это:
- Установите для видео свойство CSS
max-height, равное100%, чтобы оно не превышало высоту родительского контейнера. - Попробуйте использовать свойство
object-fit, чтобы контролировать, как содержимое видео будет встраиваться в отведенное пространство.
Вот обновленный CSS-код:
<style>
.gl {
width: 50%;
}
.pl {
width: 100%;
max-height: 50vh;
background: red;
overflow: hidden; /* Скрывает все, что выходит за границы контейнера */
}
video {
display: block;
width: 100%; /* Позволяет видео занимать всю ширину родителя */
max-height: 100%; /* Устанавливает максимальную высоту видео равной высоте родителя */
object-fit: cover; /* Заполняет пространство, сохраняя пропорции видео */
margin: 0 auto;
}
</style>Модифицированный HTML остается таким же:
<div class="gl">
<div class="pl">
<video src="https://superuser.com/1111.mp4" controls></video>
</div>
</div>Объяснение изменений:
overflow: hidden;— это свойство добавляется в класс.pl, чтобы скрыть все элементы видео, которые могут превышать границы контейнера при определенных пропорциях.width: 100%;— устанавливает ширину видео на 100% ширины родительского контейнера.max-height: 100%;— гарантирует, что высота видео не превысит высоту родительского контейнера.object-fit: cover;— изменяет поведение видео так, чтобы оно заполняло пространство, сохраняя при этом правильные пропорции, и чтобы не было искажений.
Эти изменения обеспечат корректное отображение видео, которое будет адаптироваться к размерам контейнера и не выходить за его пределы, в то время как сохраняет нужное соотношение сторон.