Html5的video标签自动填充满父div的大小
来源:互联网 发布:软件著作权加急官费 编辑:程序博客网 时间:2024/05/16 18:37
最近在写实时监控,发现给video加上它父级一样的宽高,但是实际上video的宽要比它父级的宽度要小。想要video能自动填充慢父div的大小,只要给video标签加上style=”width= 100%; height=100%; object-fit: fill”即可。
object-fit语法
object-fit属性的语法非常的简单:
object-fit:fill | contain | cover | none | scale-down
object-fit主要适合于替换元素,比如:<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。
其默认值为fill。object-fill取值的说明如下:
fill:此值为boject-fit的默认值,替换内容的大小被设置为填充元素的内容框,也就是说,元素的内容扩大到完全填充容器的外形尺寸,即使这打破其内在的宽高比。
contain:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为一个包含元素的宽度和高度。也就是说,如果你在替换元素上设置一个明确的高度和宽度,此值将导致内容大小,完全在固定的比例显示,但仍在元素尺寸内显示。
cover:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说,替换元素内容大小保持长宽比,但改变宽度和高度,以便完全覆盖内容元素。
none:替换元素内容不调整大小以适应内部元素的容器,内容完全忽略设置在元素上的任何高度和权重,并且仍在元素尺寸内显示。
scale-down:当内容大小设置了non或contain,将导致具体对象变得更小。
阅读全文
0 0
- Html5的video标签自动填充满父div的大小
- Html5的video标签自动填充满父div的大小
- Html5的video标签自动填充满父div的大小
- HTML5的Video标签的属性,方法和事件汇总及Video填充满父div的大小
- HTML5的Video标签的属性,方法和事件汇总及Video填充满父div的大小
- html5的video标签
- HTML5的video标签
- 自定义video标签的大小
- 学习html5的video标签
- Html5的video标签设置
- HTML5教程之video标签的应用
- HTML5的Video标签详细说明手册
- IE8支持html5的<video>标签
- jsp中插入html5的video标签
- 使用HTML5的video标签播放视频
- Html5的视频标签API-video
- html5的video标签测试应用
- 如何让td里的div自动充满td ?
- QNX驱动开发—APP应用与resource manger的交互通信,进程间通信
- CO-IP技术详解
- 慕课玩转算法课程之动态规划入门——1
- 移动设备手势事件库Touch.js
- ctrl+home在16寸笔记本中的使用
- Html5的video标签自动填充满父div的大小
- 面试之常考二叉树
- form表单提交的两种方式
- 莫比乌斯反演知识点及其理解
- SSL CA客户端证书双向认证IIS配置及代码验证
- 微商城的魅力
- 【备忘】传智播客最新大数据第3期实战培训完整版视频教程
- C++后端开发面试题
- java实现二分图匹配匈牙利算法(HDU1083)