Кто-нибудь смог успешно изменить размер элемента video
на родительский div?
Мой элемент видео содержит поток веб-камеры, который входит с ratio of 4:3
. Я хотел бы разорвать коэффициент и настроить его на размер div. Я пробовал следующее:
- Установить
width and height 100%
> , это ничего не делает, осталось 4: 3 - Установить
min-height and min-width 100%
> , это приводит к изменению размера видео до действительно огромного, что переполняет div -
position:absolute, bottom, top, left and right: 0px
также огромный поток над родительским div - Использование javascript для получения высоты и ширины родительских div, а затем установки для видео: Отсутствие эффекта, соотношение 4: 3 остается без изменения размера.
Итак, кто-нибудь знает, как это сделать?
EDIT. Благодарим Гаурава за подробный ответ. Это выглядит хорошо, мне жаль, что это не сработает для меня.
.parentDiv // Results in around 400x400 pixels for me
{
position: absolute;
top: 11px;
right: 10px;
left: 10px;
height: -webkit-calc(50% - 18px);
height: calc(50% - 18px);
display: block;
}
Мой элемент видео находится там, я дал ему ваше решение CSS. К сожалению, он только стал белым. Может ли мой parentDiv css иметь какое-либо отношение к этому?
EDIT 2: здесь HTML:
<div class="parentDiv">
<video class="cam_video" autoplay></video>
</div>
Это в основном это. Атрибут src для видео устанавливается в мой поток веб-камеры.
РЕДАКТИРОВАТЬ 3:
Если я щелкнул правой кнопкой мыши и проверил в этом скриншоте http://s22.postimg.org/th4ha8nmp/ratio2.png белую (теперь красную надпись), Chrome показывает мне, что белый также принадлежит потоку.
Кажется, что поток веб-камеры встречается с белыми полосками сверху и снизу. Это... раздражает.