css – 将元素调整为父div

有没有人能够成功地将视频元素调整到父div？

我的视频元素包含一个以比例为4：3的网络摄像头流.我想打破比例,并调整到div的大小.我尝试过以下操作：

>设置宽度和高度100％>这不做任何事情,4：3仍然存在
>设置最小高度和最小宽度100％>这使得视频调整到真正巨大的溢出div的东西
> position：absolute,bottom,top,left和right：0px也是父div的巨大流量
>使用javascript获取父div的高度和宽度,然后将其设置为视频：无效果,4：3比例保留,无大小更改.

那么有没有人知道怎么做呢？

编辑：谢谢Gaurav的这个非常详细的答复.它看起来不错,我希望它可以为我工作.

.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可能与此有关系吗？

编辑2：这是HTML：

<div class="parentDiv"> 
    <video class="cam_video" autoplay></video>                      
</div>

这主要是它.视频的src属性设置为我的网络摄像头流.

编辑3：

如果我右键单击并检查此截图http://s22.postimg.org/th4ha8nmp/ratio2.png中的白色(现在是红色的涂鸦)部分,Chrome会显示白色也属于流.

看起来好像网络摄像头的流与顶部和底部的白色条纹一起出现.这是烦人的

解决方法

1)仅CSS

Demo

HTML

<div class="wrapper">
  <video class="videoInsert">
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
 </video>
</div>

CSS

.videoInsert {
    position: absolute; 
    right: 0; 
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

2)jQuery

Demo

HTML

<div id="video-viewport">
    <video autoplay preload width="640" height="360">
        <source src="https://s3.amazonaws.com/whiteboard.is/videos/bg-loop-new.mp4" />
    </video>
</div>

CSS

#video-viewport {
    position: absolute;
    top: 0;
    left:0;
    overflow: hidden;
    z-index: -1; /* for accessing the video by click */
}
body{
    margin:0;
}

jQuery的

从这个答案 – simulate background-size:cover on <video> or <img>

06004

3)仅使用iframe css

Demo

HTML

<div class="wrapper">
    <div class="h_iframe">
        <iframe src="//www.youtube.com/embed/9KunP3sZyI0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

.h_iframe iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%; 
  height:100%;
}