HTML5 Видео: сохранение пропорций при изменении размера

Question

У меня есть элемент видео, установленный на 100% ширину в контейнере div. Этот div имеет максимальную ширину 800 пикселей и минимальную ширину 400 пикселей. При изменении размера браузера мне нужно, чтобы элемент видео изменялся, сохраняя исходное соотношение сторон. В настоящее время он изменяет размер в ширину, но остается его первоначальной высотой, добавляя верхние и нижние панели почтовых ящиков, чтобы компенсировать это.

Возможно ли изменение размера видеоэлемента динамически, не прибегая к Javascript?

Answer 1

Согласно the box model, in the section on replaced elements, это должно работать, как вы ожидаете: Так как видео имеет height из auto и набор width, и она имеет an intrinstic ratio (как видео), то используется значение высоты должно быть вычислен на основе тех, , Убедитесь, что вы не указав height везде - следующий CSS работал для меня:

video { 
    width: 100%; 
} 
div { 
    max-width: 800px; 
    min-width: 400px; 
} 

Попробуйте явное добавление height: auto к видео - возможно с !important, чтобы увидеть, если она становится установлена ​​где-то в другом месте.