首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >调整<video>元素到父div的大小

调整<video>元素到父div的大小
EN

Stack Overflow用户
提问于 2014-04-23 23:11:07
回答 7查看 115.6K关注 0票数 39

是否有人能够成功地将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非常详细的回复。它看起来不错,但我希望它能为我工作。

代码语言:javascript
复制
.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:这是

代码语言:javascript
复制
<div class="parentDiv"> 
    <video class="cam_video" autoplay></video>                      
</div>

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

编辑3个

如果我右击并查看屏幕截图https://s22.postimg.cc/th4ha8nmp/ratio2.png中的白色部分(现在是红色的涂鸦),Chrome会显示白色也属于流。

看起来好像摄像头的流在顶部和底部都有白色的条纹。这是..。很烦人。

EN

回答 7

Stack Overflow用户

发布于 2017-06-11 02:19:39

您可以使用object-fit属性来解决这个问题。HTML:

代码语言:javascript
复制
<div class="parentDiv"> 
    <video class="cam_video" autoplay></video>                      
</div>

CSS:

代码语言:javascript
复制
.cam_video {
object-fit: fill;
}

这将使视频拉伸到占据整个父div。

票数 13
EN

Stack Overflow用户

发布于 2018-05-01 03:20:03

代码语言:javascript
复制
 object-fit: cover;

这对我来说很有效。

票数 4
EN

Stack Overflow用户

发布于 2020-10-16 16:57:51

我只是处在一个类似的情况下,得到了一个还没有提到的解决方案:

htmlbody使用内容定义的高度填充视口,#header#footer使用内容定义的高度,#content使用中间的剩余空间。

由于其他原因,#content已经是position: relative了,所以在<video>中添加 position: absolute 就足以让它适合了。

现在,当视口的高度不足以容纳整个视频时,object-fit: contain会裁剪顶部和底部,就像当视口太窄时,它会左右裁剪一样。

代码语言:javascript
复制
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; }
代码语言:javascript
复制
<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>

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23248441

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档