当使用HTML的<video>标签时，若希望poster属性指定的图片能填充整个屏幕，可以利用CSS的object-fit属性。将object-fit设置为fill，可以让图片按比例扩展填满元素的整个宽度和高度，实现全屏效果。代码示例为将video元素的width和height设为100%，并添加object-fit:fill。
<video>标签的poster属性图片铺满整个屏幕
在用<video>标签的时候发现图片不能平铺整个屏幕，后来查了一下需要用到object-fit属性 从MDN上查到的属性内容如下：
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
MDN上object-fit属性.png
设置成fill平铺就可以了，代码如下：
video{
width:100%;
height:100%;
object-fit:fill;
}
参考网址 https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
