Я знаю, что есть другие вопросы об этом, но они старые и не обновлены текущей поддержкой браузеров. И они не охватывают конкретную проблему Chrome с этим.
Я хочу видео (я тоже хочу сделать это с изображением, но здесь я использую видео), занимая на 100% ширину окна, но с контейнером с ограниченной заданной высотой. Сохранение соотношения сторон видео (что очень важно).
В принципе, object-fit: cover отлично работает. И в Safari работает отлично, видео высокого качества/уменьшенного масштаба внутри его контейнера, поддерживающего соотношение сторон.
В Chrome тоже случается, но нет никакого отношения к высоте контейнера. Элемент превосходит высоту его контейнера и продолжает расти до дна в соответствии с шириной окна.
object-fit: fill хорошо работает в обоих браузерах, но проблема здесь очевидна, соотношение сторон не соблюдается, деформируя видео/изображение и т.д.
Вот что у меня есть:
HTML
<video preload autoplay loop poster="poster.jpg" id="bgvid">
<source src="image/video.mp4" type="video/mp4">
</video>
CSS
#bgvid {
width: 100%;
min-width: 100%;
height: 445px;
max-height: 445px;
background-color: #f0f0f0;
object-fit: cover; /* cover works perfectly on Safari */
}
Мой вопрос: как я могу сделать эту работу отлично соблюдая высоту контейнера (или, по крайней мере, минимальную высоту или максимальную высоту), реагировать во всех браузерах, сохраняя пропорции элементов?
