HTML中 video标签样式铺满全屏

哥很冷漠2024-03-12 22:58

video标签默认不是铺满的，即使手动设置宽高100%也不会生效，所以当需要video铺满div时，需要加上一个css样式

xml 复制代码

<video
    controls
    style="width: 100%; height: 100%; object-fit: fill"
    autoplay
    :src="item.video"
></video>

关键是这个"object-fit: fill"，这样就可以解决了！

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。

object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。

fill: 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。