遇到这个属性,是在给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;)的更多相关文章

  1. flutter图片铺满父框

    正常我们需要显示一张图片,会用到Image这个控件. 打个比方,我们加载一张本地的图片, 先看一下这个Image.asset的源码: Image.asset(String name, { Key ke ...

  2. video自动填充满父级元素

    想要video能自动填充慢父div的大小,只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可. obj ...

  3. video作为背景全屏铺满问题

    项目中我打算使用一个MP4视频作为登录界面背景,首先在静态页面都没法显示出来,后来发现需要将视频的编码格式转换为H264的格式方能正常显示(使用格式工厂转换即可): 后又发现视频没办法铺满全屏,在不同 ...

  4. CSS(十三).高度如何铺满全屏

    该需求来源一次面试题. IE6不认识!important声明,IE7.IE8.Firefox.Chrome等浏览器认识:而在怪异模式中,IE6/7/8都不认识!important声明,这只是区别的一种 ...

  5. CSS3 04. 伸缩布局、设置主轴,侧轴方向、主/侧轴对齐方式、 伸缩比例、元素换行、换行控制、覆盖父元素的align-items;控制子元素顺序、web字体、突变字体

    CSS3 在布局方面做了非常大的改进,对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开发中可以发挥极大的作用.(兼容性不好) 必要元素: 指定一个盒子为伸缩盒子 displa ...

  6. Unity2D 背景图铺满与Camera.Size的计算公式

    在unity制作2D游戏的教程,背景图sprite铺满显示时Camaer的Size调到多少合适,作个笔记. 资源参数 background.png 2048x640,Sprite的像素单位:100 调 ...

  7. 注意padding-top 百分比定义基于父元素宽度的百分比上内边距!!是基于宽度

    定义和用法 padding-top 属性设置元素的上内边距(空间). 说明 该属性设置元素上内边距的宽度.行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上 ...

  8. 寻找对象在父元素下的index

    方法一. window.onload=function(){    //寻找对象在父元素下的index    function getIndexParent(element){         var ...

  9. input元素有padding间距,所以使用box-sizing来保持宽度不超出父元素

    http://vicbeta.com/code/2013/04/24/phone-over-width.html 手机web开发资料少,原创解决方案Mark. 手机页面遇到一个横竖屏切换时出现的问题. ...

随机推荐

  1. Filesystem Case-Sensitivity Mismatch

    Filesystem Case-Sensitivity Mismatch The project seems to be located on a case-sensitive file system ...

  2. Spring中新建记录后返回自增主键的处理方法

    接手一个旧系统改造的过程,要插入后立即返回自增值,不能重构guid类型主键,Spring提供了很优美的机制. Spring利用GeneratedKeyHolder,提供了一个可以返回新增记录对应主键值 ...

  3. javascript中的LHS和RHS

    最近在拜读<你不知道的javascript>,接触到一个比较陌生的概念,LHS查询和RHS查询. 简单的一句话来讲,当变量出现在赋值操作符的左侧时进行LHS查询,出现在右侧时进行RHS查询 ...

  4. Spring 源码分析之 bean 实例化原理

    本次主要想写spring bean的实例化相关的内容.创建spring bean 实例是spring bean 生命周期的第一阶段.bean 的生命周期主要有如下几个步骤: 创建bean的实例 给实例 ...

  5. oracle生成AWR报告方法

    2018-04-02 19:59:42 在10g 11g中AWR自动的每隔一小时进行一次数据采集并生成快照.下面是生成AWR报告的步骤: 1:使用oracle用户在数据库服务器上执行如下命令 sqlp ...

  6. Shell脚本 | 截取包名

    之前写 shell 脚本的几篇文章都是先大致介绍脚本的功能和写法,然后一股脑的给出完整的代码.并没有细致入微的解释脚本中的每一行是如何思考如何编写的. 今天反其道而行之,只介绍一行代码.争取能讲的清楚 ...

  7. C#效率优化(2)-- 方法内联

    一.JIT编译器可以通过将方法内联展开(Method Inline Expansion)来提升效率,类似C++中的内联函数(Inline Function),与C++的内联函数不同的是,C#并不支持内 ...

  8. 和我一起打造个简单搜索之Logstash实时同步建立索引

    用过 Solr 的朋友都知道,Solr 可以直接在配置文件中配置数据库连接从而完成索引的同步创建,但是 ElasticSearch 本身并不具备这样的功能,那如何建立索引呢?方法其实很多,可以使用 J ...

  9. Storm 入门教程

    在这个教程中,你将学会如何创建 Storm 的topology并将他们部署到 Storm 集群上, 主要的语言是 Java,但是少数几个例子用 Python 编写来说明 Storm 的多语言支持能力. ...

  10. rem布局原理深度理解(以及em/vw/vh)

    一.前言 我们h5项目终端适配采用的是淘宝那套<Flexible实现手淘H5页面的终端适配>方案.主要原理是rem布局.最近和别人谈弹性布局原理,发现虽然已经使用了那套方案很久,但是自己对 ...