为什么video标签不能撑满整个父容器

HelloBitches 2015-11-25 06:16:08

...全文

844 5 打赏收藏转发到动态举报

写回复

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

前端_黑喂狗 2019-03-23

打赏
举报

回复 1

给video标签加上style="width= 100%; height=100%; object-fit: fill"即可实测有效

kaiyilian 2015-11-30

打赏
举报

回复

同问，为什么video标签设置成width:100%后，边框有黑色，播放内容只占中间部分

业余草 2015-11-26

打赏
举报

回复

源码贴出来看看！

HelloBitches 2015-11-26

打赏
举报

回复

111111

HelloBitches 2015-11-25

打赏
举报

回复

用firebug选择到video标签的实体时显示vidoe的宽高已经超过了这个父容器的宽高但不知道为什么父容器依旧有空隙

开发中大量使用了video标签，video标签比较有个性，就算你设置了固定的宽高，它依然会根据其中一个属性来自己缩放，所以总会出现空白间隙，如何使video能够自适应的撑满整个父级容器呢。这里可以给video样式加上 object-fit：cover；属性如此video即可实现自适应宽高外层的父级样式 .initial-video{ width: 100%; height: 100%; position: fixed; background-color: #000;

如何让video宽高撑满父级，实现自适应。

scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。bject-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。none 保留原有元素内容的长度和宽度，也就是说内容不会被重置。inherit 从该元素的父元素继承属性。

问题：video无法占满整个div 解决：直接给video加上object-fit: fill;即可 object-fit属性介绍 object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。 object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。值描述 fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 contain 保持原有尺寸比例。内容被缩放。 cover 保持原有尺

在使用video标签的时候，很多时候我们并不想去使用默认的16：9的显示比列，而自定义的宽和高显示出来后，又总是被默认比列所影响，那么如何解决呢？其实想要video能自动填充慢父div的大小，只要给video标签加上 style="width= 100%; height=100%; object-fit: fill" 即可。这...

39,084

社区成员

5,548

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章