Отзывчивый объектив: исправление обложек в Chrome

Я знаю, что есть другие вопросы об этом, но они старые и не обновлены текущей поддержкой браузеров. И они не охватывают конкретную проблему Chrome с этим.

Я хочу видео (я тоже хочу сделать это с изображением, но здесь я использую видео), занимая на 100% ширину окна, но с контейнером с ограниченной заданной высотой. Сохранение соотношения сторон видео (что очень важно).

В принципе, object-fit: cover отлично работает. И в Safari работает отлично, видео высокого качества/уменьшенного масштаба внутри его контейнера, поддерживающего соотношение сторон.

В Chrome тоже случается, но нет никакого отношения к высоте контейнера. Элемент превосходит высоту его контейнера и продолжает расти до дна в соответствии с шириной окна.

object-fit: fill хорошо работает в обоих браузерах, но проблема здесь очевидна, соотношение сторон не соблюдается, деформируя видео/изображение и т.д.

Мой вопрос: как я могу сделать эту работу отлично соблюдая высоту контейнера (или, по крайней мере, минимальную высоту или максимальную высоту), реагировать во всех браузерах, сохраняя пропорции элементов?

Ответы

Ответ 1

Я просто ударил это сам. Похоже, если вы обернете свой видеоэлемент в div и установите переполнение как скрытое, то оно будет работать вокруг Chrome, например:

<div class="wrapper">
  <video preload autoplay loop poster="poster.jpg" id="bgvid">
    <source src="image/video.mp4" type="video/mp4">
  </video>
</div>

с css

#bgvid {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  object-fit: cover; /* cover works perfectly on Safari */
}

.wrapper {
  width: 100%;
  min-width: 100%;
  height: 445px;
  max-height: 445px;
  overflow: hidden;
}

Я также нашел пару файлов с проблемами, которые, по-видимому, покрывают ошибку Chrome: