Html5的video标签自动填充满父div的大小
来源:互联网 发布:linux快捷键 编辑:程序博客网 时间:2024/06/06 01:12
想要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取值说明
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 ?
- 反射_案例1_读文件流
- HDFS基本命令
- 简单的人脸跟踪
- Python 判断是否在字典里用in还是has_key()
- 使用nginx作为websocket的proxy server 【转】
- Html5的video标签自动填充满父div的大小
- Intel, AMD及VIA CPU的微架构(5)
- 线程池
- php单引号中双引号的字符串
- java使用poi读取ecxel文件的工具类
- Shader编程学习笔记(七)—— Surface Shader 1
- Spring 开启Annotation <context:annotation-config> 和 <context:component-scan>诠释及区别
- spring-boot入门实例
- Mac Mounty正常卸载方法(mount failed异常解决)