video 铺满父元素(object-fit: fill;)
遇到这个属性,是在给video 嵌入一个div时,导致video播放器上下有灰色。在控制台查看video默认样式的时候看到了这个属性。
播放器上下的灰色,不是我们想要的样式,如果能完全覆盖就更好了。
下图是我用object-fit:fill进行修改的

.a{
position: relative;
width: 320px;
height: 200px;
background-color: #B4B4B4;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
video {
object-fit: fill;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
width: 100%;
height: 200px;
}
video 铺满父元素(object-fit: fill;)的更多相关文章
- flutter图片铺满父框
正常我们需要显示一张图片,会用到Image这个控件. 打个比方,我们加载一张本地的图片, 先看一下这个Image.asset的源码: Image.asset(String name, { Key ke ...
- video自动填充满父级元素
想要video能自动填充慢父div的大小,只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可. obj ...
- video作为背景全屏铺满问题
项目中我打算使用一个MP4视频作为登录界面背景,首先在静态页面都没法显示出来,后来发现需要将视频的编码格式转换为H264的格式方能正常显示(使用格式工厂转换即可): 后又发现视频没办法铺满全屏,在不同 ...
- CSS(十三).高度如何铺满全屏
该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...
- CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体
CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...
- Unity2D 背景图铺满与Camera.Size的计算公式
在unity制作2D游戏的教程,背景图sprite铺满显示时Camaer的Size调到多少合适,作个笔记. 资源参数 background.png 2048x640,Sprite的像素单位:100 调 ...
- 注意padding-top 百分比定义基于父元素宽度的百分比上内边距!!是基于宽度
定义和用法 padding-top 属性设置元素的上内边距(空间). 说明 该属性设置元素上内边距的宽度.行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上 ...
- 寻找对象在父元素下的index
方法一. window.onload=function(){ //寻找对象在父元素下的index function getIndexParent(element){ var ...
- input元素有padding间距,所以使用box-sizing来保持宽度不超出父元素
http://vicbeta.com/code/2013/04/24/phone-over-width.html 手机web开发资料少,原创解决方案Mark. 手机页面遇到一个横竖屏切换时出现的问题. ...
随机推荐
- Java集合框架之一:ArrayList源码分析
版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! ArrayList底层维护的是一个动态数组,每个ArrayList实例都有一个容量.该容量是指用来存储列表元素的数组的大小.它总是至少等于 ...
- Java学习笔记42(序列化流)
对象中的数据,以流的形式,写入到文件中保存 过程称为写出对象,对象的序列化 ObjectOutputStream将对象写到文件中,实现序列化 在文件中,以流的形式,将对象读取出来, 读取对象,对象的反 ...
- mysql数据表修复
当数据库表被破坏,运行报错: Table './database/tablename' is marked as crashed and last (automatic?) repair failed ...
- c++中的.hpp文件
http://blog.chinaunix.net/uid-24118190-id-75239.html hpp,其实质就是将.cpp的实现代码混入.h头文件当中,定义与实现都包含在同一文件,则该类的 ...
- OC学习5——类和对象
1.OC是在C语言基础上进行扩展得到的一门面向对象的程序设计语言,它也提供了定义类.成员变量和方法的基本功能.类可以被认为是一种自定义的数据类型,使用它可以定义变量,所有使用类定义的变量都是指针类型的 ...
- LeetCode--No.016 3Sum Closest
16. 3Sum Closest Total Accepted: 86565 Total Submissions: 291260 Difficulty: Medium Given an array S ...
- postgresql-无序uuid tps测试
# postgresql-无序uuid tps测试 ## 无序uuid对数据库的影响 由于最近在做超大表的性能测试,在该过程中发现了无序uuid做主键对表插入性能有一定影响.结合实际情况发现当表的数据 ...
- [原创]Struts2奇葩环境任意文件上传工具(解决菜刀无法传文件或上传乱码等问题)
上面这问题问得好 1 不知道大家有没碰到有些Strus2站点 上传JSP后访问404 或者503 注意我说的是404或503不是403(要是403换个css/img等目录或许可以) 但 ...
- 如何从GitHub仓库clone项目
自己也已经多次接触了git了,但是因为工作用svn,自己平时也很少用git,所以每次都是用的时候可能还可以,等过一段时间再来用的时候,就又忘得差不多了,所以索性自己写个博客,自己记得自己也好懂,而且熟 ...
- IdentityServer Token验证
查看源码:https://github.com/IdentityServer/IdentityServer4/tree/release API使用Client Credentials的token验证是 ...