调整<video>元素到父div的大小
是否有人能够成功地将video元素的大小调整为父div？
我的视频元素包含一个带有ratio of 4:3的网络摄像头流。我想打破这个比例，并将其调整为div大小。我尝试过以下几种方法：
- Set
width and height 100%>这不会做任何事情，4:3仍然是 - Set
min-height and min-width 100%>这使得视频调整到一些非常大的东西，溢出了div也会在父div - 上产生巨大的流量使用javascript获取父div高度和宽度，然后为视频设置它:没有效果，4:3比例保持不变。
<代码>F214
该怎么做呢？
编辑：感谢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会与此有关吗？
HTML 2：这是：
<div class="parentDiv">
<video class="cam_video" autoplay></video>
</div>这主要是它。视频的src属性被设置为我的网络摄像头流。
编辑3个
如果我右击并查看屏幕截图https://s22.postimg.cc/th4ha8nmp/ratio2.png中的白色部分(现在是红色的涂鸦)，Chrome会显示白色也属于流。
看起来好像摄像头的流在顶部和底部都有白色的条纹。这是..。很烦人。
回答 7
Stack Overflow用户
发布于 2017-06-11 02:19:39
您可以使用object-fit属性来解决这个问题。HTML：
<div class="parentDiv">
<video class="cam_video" autoplay></video>
</div>CSS：
.cam_video {
object-fit: fill;
}这将使视频拉伸到占据整个父div。
Stack Overflow用户
发布于 2018-05-01 03:20:03
object-fit: cover;这对我来说很有效。
Stack Overflow用户
发布于 2020-10-16 16:57:51
我只是处在一个类似的情况下，得到了一个还没有提到的解决方案：
html和body使用内容定义的高度填充视口，#header和#footer使用内容定义的高度，#content使用中间的剩余空间。
由于其他原因，#content已经是position: relative了，所以在<video>中添加 position: absolute 就足以让它适合了。
现在，当视口的高度不足以容纳整个视频时，object-fit: contain会裁剪顶部和底部，就像当视口太窄时，它会左右裁剪一样。
html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
#content {
height: 100%;
position: relative; /* magic sauce II */
}
video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute; /* magic sauce */
}
/* colors for demonstration */
#header, #footer { background: green; }
video { background: blue; }<html>
<body>
<div id="header">...</div>
<div id="content">
<video src="http://www.w3schools.com/html/movie.mp4"></video>
</div>
<div id="footer">...</div>
<body>
</html>
https://stackoverflow.com/questions/23248441
复制相似问题
腾讯云开发者
