Сделайте фиксированную высоту видеоэлемента

У меня есть определенная проблема, с которой я столкнулся. Мне нужно создать видеоэлемент с фиксированной высотой, а у меня есть элемент canvas, который расположен поверх видеоэлемента, который представляет собой прямоугольник, нарисованный поперек объекта.

Когда я использую object-fit с max-height: 60vh, элемент canvas также уменьшается до 60vh, но вместо этого он должен быть 100% height.

.display-cover {
  position: relative;
}

#video {
  min-width: 100%;
  object-fit: cover;
  max-height: 60vh;
}

#camera-feedback {
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

<div class = "display-cover">
  <canvas id = "camera-feedback"></canvas>
  <div class = "video-cover">
    <video id = "video" autoplay playsinline>
      Your browser does not support the video tag.
    </video>
  </div>
</div>

Пример изображения (желтый прямоугольник должен покрывать весь документ), когда высота видео 100%, все работает нормально

Сделайте фиксированную высоту видеоэлемента

Высота .display-cover устанавливается его дочерними элементами (в этом случае #video - единственный элемент с высотой), а #camera-feedback составляет 100% высоты .display-cover. Если вы хотите, чтобы холст имел заданную высоту, вам нужно установить ее либо на холсте, либо на .display-cover.

— 30.03.2021 15:36

Я предлагаю редактироватьing ваш код, чтобы добавить границы и / или фон, чтобы продемонстрировать проблему.

— 30.03.2021 15:37

@DBS уже пытался установить height из canvas и display-cover, это не сработало, я обновил свой вопрос с примером изображения

— 30.03.2021 15:46

не могли бы вы опубликовать пример?

— 30.03.2021 16:47

css

30.03.2021 15:29

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...