video设置视频的宽高
一般情况下
<video loop="loop" style="width: 100%;height:300px;" controls="controls">
<source src="http://www.html5videoplayer.net/videos/madagascar3.mp4" type="video/mp4">
<source src="http://www.html5videoplayer.net/videos/madagascar3.ogg" type="video/ogg">
</video>
但当设置video的宽高时,发现视频宽高并没有发生变化,因此设置 source的父元素宽高,让其填充video父元素。需要给video标签添加 style=“width:100%;height:300px;object-fit: fill”,即可。
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:替换元素内容不调整大小以适应内部元素的容器,内容完全忽略设置在元素上的任何高度和权重,并且仍在元素尺寸内显示。
最新文章
- 【转】 iOS9.2-iOS9.3.3越狱插件清单
- WPF中ControlTemplate和DataTemplate的区别
- Maven中Spring-Data-Redis存储对象(redisTemplate)
- DTCMS使用ajax局部刷新
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
- PyCharm 5.0.3 快捷键
- 使用Vagrant machine
- USB设备架构
- jni 入门 android的C编程之旅 --->;环境搭建&;&;helloworld
- java 生产者消费者问题 并发问题的解决(转)
- 【Android Developers Training】 5. 序言:添加Action Bar
- java垃圾回收总结(2)
- Linux 软硬链接的区别及目录权限对软硬链接的影响
- JavaScript技巧(未完成)
- vmware workstation 14 快速安装操作系统
- 延迟初始化Lazy
- P2326 AKN’s PPAP
- Duplicate复制数据库并创建物理StandBy(pfile版本)
- WebBrowser获取完整COOKIE
- 优秀的 Go 存储开源项目和库
热门文章
- 【CF666E】Forensic Examination
- 转:ubuntu-E:Encountered a section with no Package: header的解决办法
- Python 命令模式和交互模式
- MySQL安装教程图解
- BZOJ2141 排队 树状数组 分块
- datatable 转list ,list转datatable
- easyui 信息提示
- window.location.replace和window.location.href区别
- thinkphp5控制器
- 阿里 EasyExcel 使用及避坑