[H5]<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

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,958评论 1赞 45
  • CSS 的简写属性
    原文地址http://www.mark.ah.cn 定义 简写属性是可以让你同时设置其他几个 CSS 属性值的 C...
    markahcn阅读 1,214评论 0赞 1
  • 就让我任性吧
    时间过去了将近四个小时了。 在听完晨读的这段时间里，我努力的去想思路，看文章找灵感，可依然一无所获。心里想，算了吧...
    肆意奔跑Q阅读 273评论 9赞 4
  • 刻意练习——读书笔记
    这本书跟《异类》最大的不同是严谨性和可行性。 异类告诉我们，一万小时定律，普通人经过一万小时的投入，也可以成为天才...
    宁择灵阅读 249评论 0赞 0
  • SSM-Mybatis调用Oracle存储过程返回结果集(游标)示例
    之前一直都是用SSM+Mysql数据库做开发,突然一下子要换成Oracle数据库,感到非常不熟悉.虽然学过Orac...
    GuangHui阅读 11,931评论 0赞 14